Как разместить значки материалов в автономном режиме?

Если вы используете проект webpack, после

npm install material-design-icons --save

нужно просто

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

верхняя подходы не работают для меня. Я загружаю файлы из github, но браузер не загружает шрифты.

то, что я сделал, это открыть ссылку источника значка материала:

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

и я увидел эту разметку:

    /* 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;
}

Я открываю ссылку url шрифта woff https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

и загрузите файл woff2.

затем я заменяю путь к файлу woff2 новым в material-icons.в CSS

@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');
}

что делает вещь работает для меня.

Я строю для углового 4/5 и часто работаю в автономном режиме, и поэтому для меня сработало следующее. Сначала установите NPM:

npm install material-design-icons --save

затем добавьте следующие стили.css:

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

это может быть простым решением

сделать это хранилище это вилка исходный репозиторий Google опубликовала.

установите его с bower или npm

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

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

импортируйте файл css на свою HTML-страницу

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

или

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

Test: добавьте значок внутри тега тела вашего HTML-файла

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

если вы видите значок лица, вы ЛАДНО.

если не работает, попробуйте добавить этот .. в качестве префикса node_modules путь:

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

Я попытался скомпилировать все, что нужно сделать для самостоятельного размещения значков в моем ответе. Вам нужно выполнить 4 простых шага.

1. откройте папку iconfont репозитория материализации

   ссылка- [https://github.com/google/material-design-icons/tree/master/iconfont]

2. загрузите эти три файла значков ->

   MaterialIcons-Регулярные.woff2 - формат('woff2')

   MaterialIcons-Регулярные.woff - format ('woff')

   MaterialIcons-Регулярные.ttf - format ('truetype');

   Примечание - после загрузки вы можете переименовать его как угодно.

3. теперь, перейти к в CSS и добавьте этот код

@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';
}

Примечание: адрес, указанный в src: url(...) должен быть с уважение к "CSS-файлу", а не индексу.HTML-файл. Например, это может быть src: url(../ myicons / MaterialIcons-регулярные.woff2)

1. вы готовы использовать сейчас, и вот как это можно сделать в HTML

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

клик здесь чтобы увидеть все значки, которые можно использовать.

мой рецепт имеет три шага:

1. установить материал-дизайн-пакет иконок

   npm install material-design-icons
   

2. для импорта материалов-иконки.css файл В.меньше или .scss файл / проект

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

3. включить рекомендуемый код в reactjs .файл JS/ проекта

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

On http://materialize.com/icons.html информация заголовка стиля, которую вы включаете на странице, вы можете перейти к фактической гиперссылке и сделать локализованные копии для использования значков в автономном режиме.

вот как.NB: вы скачаете всего два файла .в CSS и некий-файл.woff.

1. перейдите по следующему URL-адресу, как требуется в заголовке

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

Сохранить страницу как whatever_filename.стиль CSS. По умолчанию значок.в CSS

1. ищем строку

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

1. посетите URL-адрес, который имеет .уже заканчивая его

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 . Ваш браузер автоматически загрузит его. Сохраните его в папке CSS.

1. Теперь у вас должны быть два файла .в CSS и 2fcrYFNa....мой.wof22 сохраните их в ваш CSS. Теперь внесите изменения в заголовок css расположение к значку.CSS в ваших каталогах. Просто убедись .файл woff2 всегда находится в той же папке, значок.стиль CSS. Не стесняйтесь редактировать длинные имена файлов.

заголовок вопроса спрашивает, как хоста материал иконки форума, но тело уточняет, что цель использовать значки материалов в автономном режиме (выделено мной).

использование собственной копии файлов значков материалов является допустимым подходом / реализацией. Еще, для тех, кто может использовать работник сервиса позволить работнику службы позаботиться о нем. Таким образом, у вас нет хлопот с получением копии и ее сохранением до настоящего времени.

например, создайте работника службы с помощью "мастерская", используя самый простой подход запуска workbox-cli и принятия значений по умолчанию, затем добавьте следующий текст к созданному работнику службы:

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

затем вы можете проверить, что он был кэширован в Chrome с помощью F12 > Application > Storage > IndexedDB и искать запись с googleapis в имени.

Калоян Стаматов метод является лучшим. Сначала перейдите кhttps://fonts.googleapis.com/icon?family=Material + иконки. и скопируйте файл css. содержание выглядит так

/* 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 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Затем замените файл в исходном коде. Вы можете переименовать его, если хотите Нет необходимости загружать файл 60MB из на GitHub.Мертвые простой Мой код выглядит так

@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-это загруженный и замененный файл woff2.

после npm install material-design-icons, добавьте это в свой основной файл CSS:

@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';
}