Икон­оч­ный шрифт
материального дизайна

Иконочный шрифт для веб-сайта

Шрифт материальных иконок является самым простым способом включить материальные иконки к веб-проектами. Упакованные все материальные иконки в единый шрифт, который использует преимущества типографских возможностей рендеринга современных браузеров, так что веб-разработчики могут легко включить эти иконки с помощью всего нескольких строк кода.

Используя шрифт не только самый удобный метод, но он является эффективным и выглядит великолепно:

  • Тысячи иконкок все из одного маленького файла
  • Подается с серверов "Web Font Google" или свой хостинг
  • Поддерживается всеми современными веб-браузерами
  • Цвета, размеры и расположение полностью с помощью CSS
  • На основе вектора: Отлично смотрится в любом масштабе, Retina (сетчатка) дисплеем, с низким DPI экранов дисплея.

Иконочный шрифт весит только 42KB в его наименьшему формате woff2 и 125kb в стандартном формате WOFF. Для сравнения, SVG файлы, сжатые с помощью Gzip обычно больше в размере, но это может быть значительно уменьшено путем компиляции только нужных иконок в один SVG файл с символьным спрайтов.

Использование с помощью Гугл Веб Фонтс

Самый простой способ настроить Иконочный шрифт для использования на любой веб-страницы через Google Web Fonts. Все, что вам нужно сделать, это включить одну строку HTML: 

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

Как и другие Google Web Fonts, правильный CSS будет подан, чтобы активировать шрифт "Материальные Иконки", специфичные для браузера. Дополнительный класс CSS будет объявлен под названием .material-icons. Любой элемент, который использует этот класс будет иметь правильный CSS, чтобы сделать эти иконки из веб-шрифта.

Использование иконок в HTML

Легко включить иконки в веб-страницу. Вот небольшой пример: 

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

В этом примере используется типографский функцию под названием лигатуры, которая позволяет визуализацию иконкой глифа, просто используя его текстовое имя. Замена производится автоматически с помощью веб-браузера и обеспечивает более читаемый код, чем эквивалентный числовой ссылкой на символ.

Лигатуры (Ligatures) - эта функция поддерживается в большинстве современных браузеров на настольных и мобильных устройств. Начиная с версий: Google Chrome: 11; Mozilla Firefox: 3.5; Apple Safari: 5; Microsoft IE: 10; Opera: 15; Apple MobileSafari: iOS 4.2; Android Browser: 3.

Для браузеров, которые не поддерживают лигатуры, для указания иконки, использут числовые ссылки на символы, как в примере ниже:

 <i class="material-icons">&#xE87C;</i>

Найти названия и коды иконок можно в библиотеке материальных иконок которая показывает полный набор имён и кодов символов.

Стилизация иконки в материальном дизайне

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

Определение размеров

Хотя иконки в шрифте можно масштабировать до любого размера, в соответствии с руководством материального дизайна иконок, мы рекомендуем их для показа в 18, 24, 36 или 48px. По умолчанию 24px.

/* Правила для размера значка */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Материальные иконки выглядят лучше всего на 24px, но если необходимо отображать в альтернативном размере, используйте указанные выше правила CSS

face <i class="material-icons md-18">face</i>
face <i class="material-icons md-36">face</i>

Окраска иконки

Используя иконку шрифт позволяет легко вводить в моду иконы в любом цвете. В соответствии с рекомендаций материала дизайн иконка, для активных иконок мы рекомендуем использовать либо черный на 54% непрозрачности или белого цвета на 100% непрозрачностью при отображении их на светлых или темных фонов, соответственно. Если значок отключен или неактивный, используйте чёрный на 26% или белого цвета на 30% для светлых и темных фонов, соответственно.

/* Правила для использования иконки черного цвета на светлом фоне. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Правила для использования иконки белого цвета на темном фоне. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Пример для рисования иконкой на светлом фоне с темным цветом переднего плана:

face <i class="material-icons md-dark">face</i>
face <i class="material-icons md-dark md-inactive">face</i>

Чтобы задать пользовательский цвет иконки, определите правила CSS с указанием желаемого цвета для шрифта:

.material-icons.orange600 { color: #FB8C00; }
face <i class="material-icons orange600">face</i>

P.S. Настройка самостоятельного хостинга

Для тех, кто хочет самостоятельно хостить веб-шрифт, необходимы некоторые дополнительные настройки.
Разместите иконочный шрифт на сайте, например https://example.com/material-icons.woff и добавьте следующее правило CSS:

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

Кроме того, правила CSS для отображения иконок необходимо будет объявить должным образом.
Эти правила, части таблицы стилей Google Web Font, но необходимо будет вручную включать в ваших проектах:

.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;

  /* Поддерживается IE/Firefox */
  font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';

  /* Поддерживается Firefox */
  -moz-osx-font-smoothing: grayscale;

  /* Поддерживается всеми браузерами на WebKit */
  -webkit-font-smoothing: antialiased;

  /* Поддерживается Safari и Chrome. */
  text-rendering: optimizeLegibility;
}

Загрузите последний стабильный zip-архив со всеми значками или новейшую версию с сайта master.

По данным Material design icons

0.0021 ...