Иконочные шрифты: как они работают?

Я понимаю, что шрифты значков - это просто шрифты, и вы можете получить значки, просто назвав их имя класса, но как работают шрифты значков?

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

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

Глификоны - это изображения, а не шрифт. Все значки находятся в изображении спрайта (также доступны как отдельные изображения), и они добавляются к элементам как расположенные backround-images:

Фактические иконки шрифтов ( FontAwesome , например) действительно вовлечь загрузки конкретного шрифта и использовать грим в contentсобственности, например:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Поскольку это contentсвойство не поддерживается в старых браузерах, они также используют изображения .

Вот пример полностью необработанного FontAwesome, используемого в качестве шрифта, превращающего ( - возможно, вы этого не увидите!) В машину скорой помощи: http://jsfiddle.net/GWqcF/2

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

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

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

Как работают иконки веб-шрифтов?

Иконки веб-шрифтов работают с использованием CSS для вставки определенного глифа в HTML с помощью свойства content. Затем он использует @font-faceдля загрузки веб-шрифта дингбата, который стилизует введенный глиф. В результате внедренный глиф становится желаемым значком.

Для начала вам понадобится файл веб-шрифта с нужными значками, либо определенные для определенных ASCIIсимволов, (A, B, C, !, @, #, etc.)либо в области частного использования шрифта Unicode, которые представляют собой пробелы в шрифте, которые не будут использоваться конкретными символами в Шрифт в кодировке Unicode.

Узнайте больше о том, как создать значок веб-шрифта, в разделе «Адаптивные значки веб-шрифтов» .