Materyal simgeleri çevrimdışı olarak nasıl barındırılır?

Bu çok basit bir soruysa özür dilerim, ancak Google materyal simgelerini

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

?

Uygulamamın, kullanıcının internet bağlantısı olmadığında bile simgeleri görüntüleyebilmesini istiyorum

Yöntem 2. Kendi kendine barındırma Geliştirici Kılavuzu

En son sürümü github'dan indirin (varlıklar: zip dosyası), sıkıştırmayı açın ve malzeme tasarım simge dosyalarını içeren iconfont klasörünü yerel projenize kopyalayın - https://github.com/google/material-design-icons/ Salıverme

Arşivden sadece iconfont klasörünü kullanmanız gerekir : farklı formatlarda (çoklu tarayıcı desteği için) ikon yazı tiplerini ve standart css'i içerir.

• @ Font-face url özniteliğindeki kaynağı, yerel projenizdeki (font dosyalarının bulunduğu yer) iconfont klasörünün göreli yolu ile değiştirin. url ("iconfont / MaterialIcons-Regular.ttf")

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

<i class="material-icons">face</i>

NPM / Bower Paketleri

Google'ın resmi olarak bir Bower ve NPM bağımlılık seçeneği vardır - Material Icons Guide 1'i izleyin

Çardak kullanarak :bower install material-design-icons --save

NPM'yi kullanma :npm install material-design-icons --save

Materyal Simgeler : Alternatif olarak, @ marella'nın https://marella.me/material-icons/ adresinden simgeleri kendi kendine barındırmak için Materyal tasarımı simge yazı tipine ve CSS çerçevesine bakın.

Not

Görünüşe göre Google'ın projesi düşük bakım modunda. Son sürüm, yazı yazıldığı sırada 3 yıl önceydi!

GitHub'da bununla ilgili birkaç sorun var, ancak Is this project actively maintained? #951malzeme simgelerini çatallayan ve korumaya devam eden birkaç topluluk projesine atıfta bulunan sorunla ilgili @cyberalien yorumuna başvurmak istiyorum .

Angular 4/5 için oluşturuyorum ve genellikle çevrimdışı çalışıyorum ve bu nedenle aşağıdakiler benim için çalıştı. Önce NPM'yi kurun:

npm install material-design-icons --save

Ardından, styles.css dosyasına aşağıdakileri ekleyin:

@import '~material-design-icons/iconfont/material-icons.css';

Üst yaklaşımlar benim için işe yaramıyor. Dosyaları github'dan indiriyorum, ancak tarayıcı yazı tiplerini yüklemedi.

Yaptığım şey malzeme simgesi kaynak bağlantısını açmaktı:

https://fonts.googleapis.com/icon?family=Material+Icons

ve bu işaretlemeyi gördüm:

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

Woff font url bağlantısını açıyorum https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

ve woff2 dosyasını indirin.

Sonra woff2 dosya yolunu material-icons.css'deki yenisiyle değiştiriyorum.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

Bu benim için bir şeyin çalışmasını sağlar.

Webpack projesini kullanıyorsanız, sonra

npm install material-design-icons --save

sadece ihtiyacın var

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

Bu kolay bir çözüm olabilir

Google'ın yayınladığı orijinal deponun bir çatalı olan bu depoyu alın .

Bower veya npm ile kurun

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

CSS Dosyasını HTML Sayfanıza İçe Aktarın

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

veya

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Test: HTML Dosyanızın gövde etiketinin içine bir simge ekleyin

<i class="material-icons">face</i>

Yüz simgesini görürseniz, sorun yoktur.

..Çalışmazsa, bunu node_modulesyola önek olarak eklemeyi deneyin :

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Tarifimin üç adımı var:

1. material-design-icons paketini kurmak için

   npm install material-design-icons

2. material-icons.css dosyasını .less veya .scss dosyasına / projesine aktarmak için

   @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

3. önerilen kodu reactjs .js dosyasına / projesine eklemek için

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>

Kullanım malzeme tasarım simgeler-iconfont

Tam açıklama, bu paketin yazarıyım

Google'ın materyal tasarım simgeleri projesi az bakımda ve bir süredir güncel değil . Https://material.io/icons/ içindeki sürüm ile material-design-simgelerindeki sürüm arasında bir boşluk var .

Bu önemli sorunları gidermek için malzeme tasarım simgeleri simgesi yazı tipi oluşturdum :

• malzeme-tasarım-ikon sıkışmalarınpm install - ilgisiz tüm svg / xml / ... dosyaları kaldırıldı
• Yazı tipi dosyaları her zaman doğrudan Google FontsCDN'den günceldir
• Scss desteği

İle yükle npm

npm install material-design-icons-iconfont --save

Web uygulamanızı nasıl paketlediğinize bağlıdır ( webpack/ gulp/ bower/ ...), .css/ .scssdosyasını içe aktarmanız gerekir (ve ilgili yazı tiplerinin yolunu değiştirebilir)

SCSS Kullanarak İçe Aktarma

Sass dosyalarınızdan birine içe aktarın

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

Daha sonra, istediğiniz simge <i class="material-icons">+ simge kimliği +</i>

<i class="material-icons">contact_support</i>

• Daha fazla içe aktarma yöntemi için material-design-icons-iconfont ile ilgili tüm talimatları okuyun

Demo sayfası

Yazı tiplerini aramaya ve kopyalayıp yapıştırmaya yardımcı olmak için hafif bir demo sayfasıyla birlikte gelir

Cevabımda kendi kendine barındırma simgeleri için yapılması gereken her şeyi derlemeye çalıştım. Bu 4 basit adımı izlemeniz gerekir.

1. Materialize havuzunun iconfont klasörünü açın

   bağlantı- https://github.com/google/material-design-icons/tree/master/iconfont

2. Bu üç simge dosyasını indirin ->

   MaterialIcons-Regular.woff2 - biçim ('woff2')

   MaterialIcons-Regular.woff - biçim ('woff')

   MaterialIcons-Regular.ttf - format ('truetype');

   Not - İndirme işleminden sonra istediğiniz gibi yeniden adlandırabilirsiniz.

3. Şimdi, gidin CSS ve bu kodu ekleyin

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Not: src: url (...) içinde sağlanan adres, index.html dosyası değil, 'CSS Dosyası' ile ilgili olmalıdır. Örneğin src: url (../ myicons / MaterialIcons-Regular.woff2) olabilir

4. Artık kullanmaya hazırsınız ve işte HTML'de nasıl yapılabileceği

<i class="material-icons">face</i>

Kullanılabilecek tüm simgeleri görmek için buraya tıklayın .

Tamamladıktan sonra, bunu npm install material-design-iconsana CSS dosyanıza ekleyin:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Açısal klipsli

npm install angular-material-icons --save

veya

npm install material-design-icons-iconfont --save

material-design-icons-iconfont, simgelerin en son güncellenmiş sürümüdür. açısal malzeme simgeleri uzun süre güncellenmiyor

Kurulumun tamamlanmasını bekleyin ve ardından onu angular.json -> projeler -> mimar -> stillere ekleyin

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

veya material-desing-icons-iconfont kurduysanız

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

2019 Güncellemesi burada:

Malzeme simgelerinizi, Düzenli simgeleri, Yuvarlak, Keskin, tüm çeşitlerini kendi kendinize barındırmak için. Onları bu depodan alın: https://github.com/petergng/material-icon-font

Bazı nedenlerden dolayı, bu yazı tiplerine neden Google depolarından kolayca erişilemediğini bilmiyorum.

Ama işte gidiyorsun.

Paketi indirdikten sonra, bin klasörüne gidin ve dört çeşidi göreceksiniz. Elbette hangisini kullanmak size kalmış.

Bunları kullanmak için bir css dosyası oluşturun ve

1. İhtiyacınız olan her çeşit için bir yazı tipi yüzü oluşturun:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

urlSimgeler projenizde neresinde bağlanacaktır.

2. Şimdi simge sınıflarını kaydedelim:

.material-icons-outlined, .material-icons {
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

Bu hale getirecek hem .material-icons-outlined, ve .material-iconssınıflar aynı varsayılan kullanın. Kullanmak istiyorsanız .material-icons-sharp, sadece iki sınıf adına ekleyin.

3. Son olarak, 1. adımdan aldığınız yazı tipi yüzünü ekleyelim.

.material-icons {
    font-family: 'Material Icons';
}

.material-icons-outlined {
    font-family: 'Material Icons Outline';
}

Yine, Sharp gibi daha fazla varyant kullanmak için bloğunu yukarıdaki ikisi gibi ekleyin.

Bittiğinde ... html'nize gidin ve yeni basılmış simgelerinizi kullanın.

<i class="material-icons-outlined">hourglass_empty</i>

<i class="material-icons">phone</i>

Sayfaya dahil ettiğiniz http://materialize.com/icons.html üzerinde , gerçek Köprüye gidebilir ve simgeleri çevrimdışı kullanmak için yerelleştirilmiş kopyalar oluşturabilirsiniz.

NB: Tüm icon.css ve somefile.woff dosyalarına iki Dosya indireceksiniz .

1. Başlıkta gerektiği gibi aşağıdaki URL'ye gidin

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> .

Sayfayı dosya_adı.css olarak kaydedin. Varsayılan, icon.css'dir

2. Bunun gibi bir çizgi ara

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. .Woff ile biten URL'yi ziyaret edin

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. Tarayıcınız onu otomatik olarak indirecektir. CSS klasörünüze kaydedin.

4. Şimdi iki dosya icon.css ve 2fcrYFNa .... mY.wof22'ye sahip olmalısınız , ikisini de css'nize kaydedin. Şimdi dizinlerinizdeki icon.css'de css başlık konumunuzda düzenlemeler yapın. .Woff2 dosyasının her zaman icon.css ile aynı klasörde olduğundan emin olun. Uzun dosya adlarını düzenlemekten çekinmeyin.

Soru başlığı, malzeme simgelerinin çevrimdışı olarak nasıl barındırılacağını sorar, ancak gövde, amacın malzeme simgelerini çevrimdışı kullanmak olduğunu açıklar (vurgu benim) .

Malzeme simgeleri dosyalarının kendi kopyanızı kullanmak geçerli bir yaklaşım / uygulamadır. Bir hizmet işçisini kullanabilenler için bir diğeri, hizmet görevlisinin ilgilenmesine izin vermektir. Bu şekilde, bir kopyasını alma ve güncel tutma zahmetine girmezsiniz.

Örneğin, kullanılarak bir servis görevlisi oluşturmak alet kutusu alet kutusu-cli çalışan ve varsayılan değerleri kabul basit yaklaşım kullanılarak, daha sonra meydana gelen servis görevlisi ile aşağıdaki metin ekleyin:

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

Daha sonra, F12> Uygulama> Depolama> IndexedDB'yi kullanarak Chrome'da önbelleğe alındığını kontrol edebilir ve adında googleapis bulunan bir girişi arayabilirsiniz.

2020 itibariyle benim yaklaşımım material-icons-font paketini kullanmak. Google'ın materyal-tasarım-ikon paketinin ve topluluk tabanlı materyal-tasarım-ikon-ikon yazı tipinin kullanımını basitleştirir .

1. Paketi yükleyin. npm install material-icons-font --save

2. Paketin CSS dosyasının yolunu, projenizin angular.json dosyasının style özelliğine ekleyin.

   ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

3. SCSS kullanıyorsanız, aşağıdaki içeriği styles.scss dosyanızın en üstüne kopyalayın.

   @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

4. Projenizin HTML dosyasındaki simgeleri kullanın.

   // Using icon tag
   <i class="material-icons">face</i>
   <i class="material-icons md-48">face</i>
   <i class="material-icons md-light md-inactive">face</i>
   
   // Using Angular Material's <mat-icon> tag
   <mat-icon>face</mat-icon>
   <mat-icon>add_circle</mat-icon>
   <mat-icon>add_circle_outline</mat-icon>

@ Angular / material'dan gelen simgeler, çevrimdışı geliştirilirken kırılma eğilimindedir. @ Angular / material ile birlikte material-icons-font paketi eklemek, etiketi çevrimdışı geliştirirken kullanmanıza olanak tanır.

Npm paketini yükle

npm install material-design-icons --save

Css dosya yolunu styles.css dosyasına koyun

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Kaloyan Stamatov yöntemi en iyisidir. Önce https://fonts.googleapis.com/icon?family=Material+Icons adresine gidin . ve css dosyasını kopyalayın. içerik buna benziyor

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
    
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

Woff2 dosyasını indirmek için yazı tipinin kaynağını tarayıcıya yapıştırın https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Ardından dosyayı orijinal kaynakta değiştirin. Github'dan 60MB'lık dosya indirmeye gerek kalmadan isterseniz yeniden adlandırabilirsiniz. Çok basit Kodum şöyle görünüyor

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

materialIcon.woff2 ise indirilen ve değiştirilen woff2 dosyasıdır.

npm install material-design-icons

ve

@import '~material-design-icons/iconfont/material-icons.css';

Angular Material 8 ile benim için de çalıştı

Bunu web yapılandırmasına eklendi ve hata ortadan kalktı

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

Bu arada, youtube'da adım adım talimatlar içeren videolar var.

https://youtu.be/7j6eOkhISzk

1. Adımlar bunlar. Materialize simge paketini https://github.com/google/material-design-icons/releases adresinden indirin

2. Simge yazı tipi klasörünü kopyalayın ve simgeler olarak yeniden adlandırın.

3. Materialize.css dosyasını açın ve aşağıdaki yolları güncelleyin:

a. url'den (MaterialIcons-Regular.eot) url'ye (../ fonts / MaterialIcons-Regular.eot) b. url'den (MaterialIcons-Regular.woff2) formatından ('woff2') url'ye (../ fonts / MaterialIcons-Regular.woff2) format ('woff2') c. url'den (MaterialIcons-Regular.woff) formatından ('woff') url'ye (../ fonts / MaterialIcons-Regular.woff) formatına ('woff') d. url'den (MaterialIcons-Regular.ttf) formatından ('truetype') url'ye (../ fonts / MaterialIcons-Regular.ttf) format ('truetype')

3. Materialize-icon.css'yi css klasörünüze kopyalayın ve html dosyanızda referans alın.

Her şey sihir gibi çalışacak!