Icon Fonts: Как они работают?

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

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

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

Ответ 1

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

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

Вот пример полностью raw FontAwesome, который используется в качестве шрифта, превращая  (& # xf0f9; - вы не сможете это увидеть!) в машину скорой помощи: <а5 >

Ответ 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, которая не испортит другие читатели).

Ответ 3

Как работают иконки Webfont

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

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

Здесь вы можете прочитать, как создать значок webfont → ссылка

Ответ 4

Проверьте это, полностью используя CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <style>
    .battery.icon {
      color: #000;
      position: absolute;
      margin-left: 2px;
      margin-top: 6px;
      width: 13px;
      height: 7px;
      border-radius: 2px;
      border: solid 1px currentColor;
    }

    .battery.icon:before {
      content: '';
      position: absolute;
      right: -3px;
      top: 1px;
      width: 2px;
      height: 3px;
      border-radius: 0 2px 2px 0;
      border-top: solid 1px currentColor;
      border-right: solid 1px currentColor;
      border-bottom: solid 1px currentColor;
    }

    .battery.icon:after {
      content: '';
      position: absolute;
      left: 1px;
      top: 1px;
      width: 8px;
      height: 5px;
      background-color: currentColor;
    }


    </style>
</head>

<body>

<div class="battery icon"></div>
</body>
</html>