WebTutorWordPressFonts Awesome в WordPress (иконочные шрифты)

Fonts Awesome в WordPress (иконочные шрифты)

Несколько лет назад широко применялись иконки изображения, с которыми было много возни и проблем. Применяли спрайты, но и те были не слишком удобны. С появлением широких дисплеев retina проблема совершенно усугубилась и стала ребром, можно так сказать. В тот период были изобретены иконочные шрифты, которые решили проблему иконок под разные размеры экранов. Поэтому ниже расскажем про Fonts Awesome в WordPress.

Эти иконки — по сути просто векторные изображения, которые могут без искажения качественно растягиваться на любой размер экранов. Поставляются иконочные шрифты в удобном небольшом пакете, который представляет собой один файл. Это очень важно также и для быстродействия — ведь значительно сокращается количество обращений на сервер за картинками, как это было ранее.

Где взять иконочные шрифты?

Их можно брать где угодно, просто введя запрос в Google. Есть довольно популярный сервис FontAwesome, который предоставляет такие иконки. Насчитывается у него более 500 иконок разной направленности.

Другой полезный сервис иконок Fontello — его большое преимущество состоит в том, что он позволяет создавать собственные наборы иконок. Вы можете создать свои файлы с теми иконками, которые вам нужны, а не со всем универсальным набором.

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

FontAwesome предоставляет 6 форматов: eot, svg, ttf, woff, woff2 и otf. После того, как вы скачали шрифты — добавляем их к сайту при помощи обычного тега link:

<link rel="stylesheet" href="css/font-awesome.min.css">

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

Напомним, что в WordPress более правильно подключать файлы стилей и скриптов через специальные функции.

Например, в файле functions.php темы нужно добавить следующее:

// Хук, который подключает стили и скрипты. В нашем случае стили
add_action( 'wp_enqueue_scripts', 'webtutor_inc_scripts');

// Функция, которая выполняет подключение стилей
function webtutor_scripts() {
    $version = '2.7.7';
    wp_enqueue_style( 'web-tutor-fonts', get_stylesheet_directory_uri() . '/css/fonts.css', array(), $version );
}

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

<i class="fa fa-fire"></i>

Сервис FontAwesome имеет различные настройки иконок, вращение, размеры — примеры эффектов можно увидеть на странице.

Для подключения иконочных шрифтов в WordPress можно также использовать плагины, один из таких —  FontAwesome.io Shortcodes.

Удобнее использовать конечно сервис Fontello  —  ссылку на который приводили выше по тексту, так как он позволяет создавать свои наборы, в которых будут только необходимые иконки без лишнего мусора. Тема будет быстрее грузиться, если не будет ничего лишнего.

Просмотров: 139

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Технологии WEB

CMS

Расширения

Сервисы