Использование различных значков в дизайне сайта (конверты, стрелки, карандаши и т.п.) несомненно делает его внешний вид привлекательней. Раньше мы чаще всего искали такие картинки где-нибудь в интернет и встраивали в дизайн через тег img или через стили как background-image.
Команда Automattic, стоящая в том числе за созданием WordPress, подготовила шрифт Genericons, состоящий более чем из сотни наиболее часто используемых вебмастерами значков.
Скриншот со значками шрифта можете посмотреть ниже.
Официальный сайт шрифта http://genericons.com/.
Как установить шрифт Genericons
Вариантов как обычно много. Привожу один из них:
- Скачиваем файлы шрифта с официального сайта — кнопка download.
- Распаковываем полученный архив в формате zip. У вас там будет вложенная папка genericons, в которой будут файлы с тем же названием с расширениями: css, eot, svg, ttf, woff и может какие-то еще. Файл css — это файл стилей, мы на нем еще остановимся подробнее, а прочие указанные выше расширения — это файлы шрифта в разных форматах.
- Создаем в папке вашей рабочей темы вложенную папку fonts (если ее, конечно, еще нет) и копируем туда все файлы из распакованной папки genericons с теми файлами, что я указал (у вас в архиве может быть несколько вложенных папок с таким названием).
- В основном файле темы style.css где-нибудь в начале добавляем инструкцию, которой подключаем файл genericons.css, находящийся в каталоге fonts.
1@import "fonts/genericons.css" all;
Все — теперь шрифт подключен к сайту и можно им пользоваться.
Как использовать шрифт
Например, мы хотим вывести на сайте в форме поиска значок увеличительного стекла, как на этом сайте.
Код кнопки поиска выглядит так:
|
1 |
<input id="searchsubmit" type="submit" value="" /> |
В кавычках параметра value указан шестнадцатиричный код символа. Код смотрим в таблице символов. Для увеличительного стекла это f400.
Предшествующие символы: амперсанд, решетка и х — это указание на шестнадцатиричный формат кода.
Кроме того, нам надо указать, что мы выводим символ из шрифта Genericons.
Для этого в таблицу стилей добавляем инструкцию:
|
1 2 3 |
#searchform input#searchsubmit { font-family: 'Genericons'; } |
Другой вариант использования шрифта на сайте — подходит только в случае, если подключали файл css, как указано в этой инструкции. Если заглянуть в этот файл, то мы обнаружим, что большая его часть состоит из инструкций типа:
|
1 |
.genericon-cart:before { content: "\f447"; } |
Разработчики прописали для каждого символа название класса, применяя который к любому элементу разметки, мы получим вывод этого символа.
То есть используя на сайте конструкцию:
|
1 |
<span class="genericon genericon-cart"></span> |
вы получите на этом месте вывод символа с корзиной.
Получить такие инструкции с кодом можно на официальном сайте шрифта (смотри выше). Для этого на сайте жмем мышкой на любой нужный нам символ, он выделяется и становится виден в верхней части сайта справа. Затем жмем на ссылку «Copy HTML» и появляется нужная инструкция span.
