Как известно, пользователи сайтов оценивают не только текстовую информацию, но и визуальное оформление. Ранее веб-дизайнеры применяли отдельные изображения или спрайты для создания значков. В результате получалась коллекция картинок, идеально размещенных для различных областей сайта, таких как строка поиска, элементы навигации, иконки загрузки и так далее.
Хотя значки на основе изображений использовались довольно долгое время (и многие ресурсы до сих пор их применяют), сегодня внимание акцентируется на адаптивном дизайне. Важно предоставлять качественные иконки, которые будут хорошо выглядеть на экранах всех устройств, таких как смартфоны и планшеты.
Также читайте: Как улучшить доступность сайта с помощью плагина для слабовидящих на WordPress.
Что такое иконочные шрифты?
Иконочные шрифты – это способ отображения полностью адаптивных и настраиваемых значков на веб-ресурсе без необходимости использования дополнительных изображений или спрайтов. Проще говоря, это специализированные шрифты, которые состоят исключительно из значков.
Если стандартный шрифт содержит известные нам символы («a», «b», «c»), то иконочный шрифт включает элементы, такие как иконка поиска, меню, кнопка Наверх и тому подобные. Все эти элементы находятся в одном шрифте.
Также читайте: Отличный плагин для создания стильного меню на WordPress Max mega menu.
Зачем использовать иконочные шрифты?
Конечно, традиционные изображения все еще имеют место быть, но иконочные шрифты предлагают больше возможностей и облегчают управление значками.
Иконочные шрифты идеально подходят для адаптивного дизайна
Что касается традиционных изображений, то они представляют собой растровые графики с фиксированным размером (обычно путем использования сетки). Такие изображения могут выглядеть не слишком удачно при изменении размеров или когда их просматривают на устройствах с высоким разрешением. Векторные же иконочные шрифты можно масштабировать до любого размера без ухудшения качества.
На иконочные шрифты можно применять стили и менять расположение
С традиционными изображениями добиваться гибкости весьма сложно. Если требуется изменить цвет или размер изображения, нужно загружать новую графику.
С помощью иконочных шрифтов можно управлять так, как будто это обычные текстовые шрифты. Вы можете устанавливать цвет значка, фона, выравнивание текста, высоту строки и многие другие атрибуты, применяя CSS. В палитре CSS вы найдете все необходимые цвета.
Иконочные шрифты предлагают кросс-браузерную поддержку
Шрифты, содержащие иконки, совместимы со всеми основными веб-браузерами, даже с их старыми версиями (например, IE6). В настоящее время существует множество иконочных шрифтов, которые регулярно обновляются, добавляя новые элементы. Например, вот один из обычных иконочных шрифтов.
Исходя из вышесказанного, традиционные изображения для значков уже не так актуальны.
Однако у иконочных шрифтов есть и некоторые недостатки.
Первое – это возможные различия в отображении значков на разных браузерах и операционных системах. Поскольку это шрифты, браузер должен правильно интерпретировать, как именно отображать каждый символ (среди различных ОС, браузеров и даже версий одного и того же браузера могут быть небольшие различия). В общем, большинство значков все же отображаются корректно в любом браузере.
Еще один момент – не все значки могут быть доступны. Дизайнеры включили множество иконок, которые могут понадобиться, но не все символы были добавлены. Это значит, что вам могут не встретиться некоторые иконки.
Читайте также: Установка favicon на сайте WordPress.
Как получить Awesome-шрифт в WordPress?
Шрифт Awesome применяется в тысячах проектов, в том числе во многих темах и плагинах WordPress. Интегрировать шрифт Awesome в проект довольно просто и сводится к выполнению нескольких шагов.
Существует множество иконочных шрифтов для использования на веб-ресурсах, но мы сосредоточимся на Font Awesome 4.7, так как он предлагает сотни купюров, действительно достойных внимания.
Установка локальной или внешней версии шрифта Awesome
Существует два основных метода получения Font Awesome. Вы можете загрузить файлы на свой сервер или воспользоваться URL-ссылкой на внешнюю таблицу стилей (CDN). Рассмотрим оба подхода.
Способ 1. Локальная загрузка шрифта Awesome и ручное подключение
Для начала перейдите на страницу загрузки на официальном сайте и нажмите кнопку Download.
В результате вы получите ZIP-архив с именем font-awesome-4.7.0.zip.
Внутри архива вы найдете шрифты и необходимый файл CSS (в папках fonts и css).
Следующий шаг – скопировать обе папки в главный каталог своего плагина или темы.
После этого следует открыть файл functions.php в редакторе и создать новую функцию для подключения стилей. Эту функцию требуется привязать к хуку wp_enqueue_scripts. Получившийся код будет выглядеть так:
function site_include_fontawesome_stylesheets() { wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css' ); } add_action( 'wp_enqueue_scripts','site_include_fontawesome_stylesheets' );
Способ 2. Подключение внешней таблицы стилей
Этот метод проще в применении. Для него вам необходимо добавить следующие строки в файл functions.php:
function site_include_fontawesome_stylesheets() { wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); } add_action( 'wp_enqueue_scripts','site_include_fontawesome_stylesheets' );
Как использовать шрифт Awesome (и шрифты значков в целом)?
Шрифт Awesome может быть использован на веб-сайте с помощью двух методов. Выбор способа реализации зависит от ваших предпочтений и требований проекта.
CSS-метод
В этом случае добавление значка производится с использованием CSS-псевдоэлементов: :before или :after, оформляя нужный HTML-элемент.
Необходимо определить, к какому элементу следует применить значок, и задать отступы в пикселях.
Каждый значок имеет уникальный код, который указывает браузеру, какой символ нужно отобразить. Основные свойства для установки – это content и font-family, чтобы создать псевдоэлемент.
Например, создадим стильную кнопку.
.my-button { display: inline-block; padding: 8px 12px; background: #eee; border: solid 1px #D5D5D5; } .my-button span { display: inline-block; } .my-button span:before { content: "\f085"; }
В браузере вы увидите следующий результат:
Для отображения значка с шестеренками был использован его код – \f085 (его можно найти на странице демонстрации).
HTML-метод
Этот способ более удобен, так как позволяет вставить значок непосредственно в текст HTML-страницы. В этом случае иконка автоматически генерирует псевдоэлементы before/after, создавая стиль для значка.
Чтобы отобразить иконку, необходимо назначить класс fa элементу (оптимально использовать такие теги, как i или span). Этот класс связывает элемент с шрифтом Font Awesome.
Как только элемент получит основной класс fa, вы можете добавить имя класса, соответствующее желаемому значку. Например, для отображения иконки камеры нужно добавить класс fa-camera-retro.
В конечном итоге браузер выведет следующее:
С помощью дополнительных классов Font Awesome можно создавать более привлекательные элементы, применяя размеры, повороты, цвета и стили.
Для примера создадим красивое навигационное меню, используя Font Awesome.
Еще один пример – это привлекательный блок с иконками социальных сетей.
Для комбинирования иконок необходимо обернуть их в другой элемент и применить к этому элементу класс fa-stack.
Для того чтобы объединить значки, необходимо использовать класс fa-stack. Размер значков можно контролировать с помощью классов, таких как fa-stack-1x и fa-stack-2x.
В качестве заключения
Стоит отметить, что в современном веб-разработке иконочные шрифты пользуются огромной популярностью. Это обусловлено их удобством в использовании: для отображения желаемого значка достаточно просто задействовать соответствующие классы. Кроме того, можно легко управлять элементами через JavaScript или jQuery, добавляя или убирая классы, что позволяет менять внешний вид значков.
Иконочные шрифты предлагают широкий ассортимент стилей и возможностей, среди которых многоуровневые значки, анимированные элементы, а также разные размеры и способы позиционирования. Все они корректно отображаются в различных веб-браузерах и на различных устройствах.
Хотите устроить яркие акценты на своем сайте? Попробуйте плагин WPRemark, который предлагает разнообразные иконки, рамки и оформление в целом.
* Facebook признан экстремистской организацией и заблокирован на территории Российской Федерации.