Этот вопрос давно не дает покоя в моем мозгу. Похоже, что все библиотеки значков глифов предоставляют значки таким образом, например Font Awesome. Это единственный способ поместить глиф в css? или это лучший способ?
a:before {
font-family: FontAwesome;
content: "\f095";
}
Я чувствую, что этот вопрос можно разделить на два отдельных:
Зачем использовать шрифты для иконок?
Зачем использовать псевдоэлементы :before для их отображения?
Для первой части причин много, но все сводится к тому, чтобы с ними было легко работать (поскольку они являются векторами, имеют прозрачный фон по своей природе, могут легко менять цвета) и имели очень хорошую поддержку даже в старых браузерах.
Во второй части использование псевдоэлементов означает, что ваши значки могут полностью «жить» в вашем файле CSS. Помимо того, что там их легче редактировать, они также относятся к этому месту — они не являются частью вашего контента, а скорее чем-то, что влияет на его внешний вид и, следовательно, не должно быть в вашем HTML. Думайте об этом как о том же различии, что и между тегом img и фоновым изображением CSS. свойство (еще раз - дизайн против содержания).
Кроме того, это предотвращает некоторые странные побочные эффекты, например, псевдоэлементы не могут быть выбраны и, следовательно, не могут быть скопированы. Если бы это было не так, все значки при копировании приводили бы к странным символам в месте назначения, куда вы их копируете.
Вы также можете использовать их как теги «i». таким образом мы можем применить гораздо более творческий CSS. Вот кодеп:
http://codepen.io/anon/pen/gLdYqj
<script src="https://use.fontawesome.com/2d1d8af5b4.js"></script>
<div><i class="fa fa-user"></i></div>
div{
font-size:50px;
}
i{
color:blue;
}
i:hover{
color:red;
cursor:pointer;
}
