Использование HTML <i>тега с вложенным текстом для отображения иконки - PullRequest
Новая
       27

Использование HTML <i>тега с вложенным текстом для отображения иконки

1 голос
/ 14 марта 2019

В большинстве CSS-фреймворков, которые имеют иконки-шрифты, есть примеры реализации: 

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

source: Material Icons

Я также знаю, что это будет работать: 

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

Последний пример логичен для меня логически, поскольку в таблице стилей CSS-фреймворка есть имена классов, в которых применяется псевдоэлемент :before, а его атрибут content установлен в значение Юникод (а также в другой шаблон).).

Мой вопрос находится на высоком уровне, отображает ли браузер первый пример?

Мне кажется, что существует связь между классом material-icons и именем значка, вложенным под ним в виде текста, и я хотел бы знать, где и как это устанавливается.

1 Ответ

1 голос
/ 14 марта 2019

Поскольку ваш пример взят из Значки материалов , я отвечу на ваш вопрос в этой области.

На высоком уровне браузер отображает первый пример?

Давайте начнем с начала: 

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

Здесь они используют элемент <i> для i cons ( не хорошая идея).Класс CSS также установлен, material-icons.Значки материалов разработаны в этой ссылке CSS : 

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

Давайте посмотрим, как устроен этот класс материала-значка : 

.material-icons {
  font-family: 'Material Icons'; /* [...] */
}

«Значки материалов» - это пользовательский шрифт , описанный на том же ресурсе: 

@font-face {
  font-family: 'Material Icons';
  /* [...] */
  src: url(https://fonts.gstatic.com/s/materialicons/v46/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

Таким образом, в итоге вы получите текст "share", отображаемый пользовательским шрифтом, иэто ключ этой функции. Это не символ Unicode и не «реальный» значок (SVG или растровое изображение), а весь текст, отображаемый с специфическим шрифтом до , который отображается как значок .

Например, в приведенном ниже фрагменте кода попытайтесь выбрать «часть» значка общего доступа, и вы поймете, что на самом деле это слово «общий», нарисованный символ на символ.Скопируйте и вставьте его в другое место, чтобы увидеть его.Например, левая точка обозначает h. 

@font-face {
  font-family: 'Material Icons';
  src: url(https://fonts.gstatic.com/s/materialicons/v46/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-size:24px;
}
<i class="material-icons">
   share
</i>
...