Иной

Иконочный шрифт

Шрифт иконок материального дизайна для веб-сайта

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

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

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

900+ иконкок все из одного маленького файла.

Подается с серверов "Web Font Google" или свой хостинг.

Поддерживается всеми современными веб-браузерами.

Цвета, размеры и расположение полностью с помощью CSS.

На основе вектора: Отлично смотрится в любом масштабе, Retina (сетчатка) дисплеем, с низким DPI экранов дисплея.

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

Использование с помощью Google Web Fonts

Самый простой способ настроить Иконочный шрифт для использования на любой веб-страницы через 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>

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

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

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

/* Правила для размера значка */
.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; }

/* Правила для использования иконки черного цвета на светлом фоне. */
.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); }

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

Хотя иконки в шрифте можно масштабировать до любого размера, в соответствии с руководством материального дизайна иконок, мы рекомендуем их для показа в 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

<i class="material-icons md-18">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); }

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

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

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

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

.material-icons.orange600 { color: #FB8C00; }

<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; /* Предпочтительный размер иконки */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

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

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

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

/* Поддерживается IE. */
font-feature-settings: 'liga';
}
Иконочный шрифт для веб-сайта
Звонок от знаменитостей
Звонок от знаменитостей
Разыграй друзей