Genericons — шрифт значков для сайта

Использование различных значков в дизайне сайта (конверты, стрелки, карандаши и т.п.) несомненно делает его внешний вид привлекательней. Раньше мы чаще всего искали такие картинки где-нибудь в интернет и встраивали в дизайн через тег img или через стили как background-image.

Команда Automattic, стоящая в том числе за созданием WordPress, подготовила шрифт Genericons, состоящий более чем из сотни наиболее часто используемых вебмастерами значков.

Скриншот со значками шрифта можете посмотреть ниже.

genericons

Официальный сайт шрифта http://genericons.com/.

Как установить шрифт Genericons

Вариантов как обычно много. Привожу один из них:

  1. Скачиваем файлы шрифта с официального сайта — кнопка download.
  2. Распаковываем полученный архив в формате zip. У вас там будет вложенная папка genericons, в которой будут файлы с тем же названием с расширениями: css, eot, svg, ttf, woff и может какие-то еще. Файл css — это файл стилей, мы на нем еще остановимся подробнее, а прочие указанные выше расширения — это файлы шрифта в разных форматах.
  3. Создаем в папке вашей рабочей темы вложенную папку fonts (если ее, конечно, еще нет) и копируем туда все файлы из распакованной папки genericons с теми файлами, что я указал (у вас в архиве может быть несколько вложенных папок с таким названием).
  4. В основном файле темы style.css где-нибудь в начале добавляем инструкцию, которой подключаем файл genericons.css, находящийся в каталоге fonts.

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

Как использовать шрифт

Например, мы хотим вывести на сайте в форме поиска значок увеличительного стекла, как на этом сайте.

Код кнопки поиска выглядит так:

В кавычках параметра value указан шестнадцатиричный код символа. Код смотрим в таблице символов. Для увеличительного стекла это f400.

Предшествующие символы: амперсанд, решетка и х — это указание на шестнадцатиричный формат кода.

Кроме того, нам надо указать, что мы выводим символ из шрифта Genericons.

Для этого в таблицу стилей добавляем инструкцию:

Другой вариант использования шрифта на сайте — подходит только в случае, если подключали файл css, как указано в этой инструкции. Если заглянуть в этот файл, то мы обнаружим, что большая его часть состоит из инструкций типа:

Разработчики прописали для каждого символа название класса, применяя который к любому элементу разметки, мы получим вывод этого символа.

То есть используя на сайте конструкцию:

вы получите на этом месте вывод символа с корзиной.

Получить такие инструкции с кодом можно на официальном сайте шрифта (смотри выше). Для этого на сайте жмем мышкой на любой нужный нам символ, он выделяется и становится виден в верхней части сайта справа. Затем жмем на ссылку «Copy HTML» и появляется нужная инструкция span.

Добавьте комментарий