Как работают Bootstrap Glyphicons?

Ответ 1

В Bootstrap 2.x Глификон использовал метод изображения - используя изображения, как вы упомянули в своем вопросе.

Недостатками метода изображения было то, что:

• Вы не можете изменить цвет значков
• Вы не можете изменить фоновый цвет значков
• Вы не можете увеличить размер значков

Итак, вместо глификонов в Bootstrap 2.x, многие люди использовали Font-awesome, так как это использовало значки SVG, у которых не было таких ограничений.

В Bootstrap 3.x, глификоны используют метод шрифта.

Использование шрифта для представления значка имеет преимущества перед использованием изображений:

• Масштабируемость - отлично работает независимо от разрешения клиентского устройства.
• Можно изменить цвет с помощью CSS
• Можно делать все традиционные значки (например, изменять непрозрачность, вращение и т.д.).
• Может добавлять штрихи, градиенты, тени и т.д.
• Преобразование в текст (с лигатурами)
• Лигатуры считываются программами чтения с экрана
• Изменение значков в шрифтах так же просто, как изменение семейства шрифтов в CSS

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

Итак, в дистрибутиве Bootstrap вы можете увидеть файлы шрифтов glyphicon:

fonts\glyphicons-halflings-regular.eot
fonts\glyphicons-halflings-regular.svg
fonts\glyphicons-halflings-regular.ttf
fonts\glyphicons-halflings-regular.woff

Bootstrap CSS ссылается на шрифт глификона следующим образом:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

И ссылки CSS на этот шрифт с использованием базового класса .glyphicon (обратите внимание на font-family):

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  ...
}

Затем каждый глификон использует отдельный класс значков, который ссылается на ссылку Unicode в шрифте Glyphicon Halflings, например:

.glyphicon-envelope:before {
  content: "\2709";
}

Вот почему вы должны использовать базовый класс .glyphicon, а также отдельный класс значка для элемента span в Bootstrap 3:

<span class="glyphicon glyphicon-envelope"></span>