Посетители веб-сайта, как известно, ориентируются не только на контент, но также и на его визуальный дизайн. В былые времена веб-дизайнеры и разработчики использовали отдельные изображения или спрайты для своих значков. В итоге создавалась серия изображений, идеально подходящих (в плане пикселей) для определенных частей сайта (например, в строке поиска, навигационных элементах, в качестве значков загрузки и т. д.)
Значки с изображениями (или спрайты) использовались долгое время (многие сайты до сих пор используют эти инструменты). Тем не менее, сейчас большое внимание уделяется отзывчивому дизайну. Тут важно предоставить качественную иконографику, которая будет отлично смотреться на любом экране и типе устройств, включая смартфоны и планшеты.
Ещё читайте: Как оптимизировать сайт с помощью плагина для слабовидящих для WordPress.
Что такое иконочные шрифты?
Иконочные шрифты – это способ, с помощью которого мы можем отображать полностью отзывчивые, настраиваемые значки на нашем веб-сайте без использования дополнительных изображений или спрайт-листов. Если говорить просто, то это специальные шрифты, которые полностью состоят из значков.
Если обычный шрифт состоит из привычных нам символов («a», «b», «c»), то шрифт с иконками определяет такие элементы, как символ поиска, символ переключения меню, символ кнопки Наверх и т.п. Все это находится в одном шрифте.
Ещё читайте: Крутой плагин по созданию красивого меню на WordPress Max mega menu.
Зачем использовать иконочные шрифты?
Традиционные изображения, конечно, имеют право на существование, но шрифты со значками дают большую гибкость и позволяют более легко управлять нашими значками.
Иконочные шрифты полностью отвечают требованиям адаптивности
Если говорить о традиционных изображениях, то они представляют собой растровые изображения и создаются с заданным размером (обычно на основе сетки). Эти изображения могут выглядеть ужасно при изменении размера или при просмотре на устройстве с высоким разрешением. Иконочные же шрифты являются векторными изображениям, а поэтому могут быть масштабированы до любого размера без потери качества.
Иконочные шрифты можно стилизовать и позиционировать
Традиционные изображения не дают вам гибкого контроля. Если вы хотите, чтобы изображение немного отличалось по цвету или размеру, вам нужно загрузить другое изображение.
Иконочные шрифты можно контролировать, как если бы они были типичными шрифтами. Так, вы можете установить цвет иконки и ее фона, выравнивание текста, высоту строки и другие атрибуты, чтобы стилизовать их с помощью CSS. Палитра цветов css вам в помощь.
Иконочные шрифты являются кросс-браузерными
Шрифты с иконками имеют 100% совместимость со всеми популярными веб-браузерам, включая их старые версии (например, 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 wpschool_include_fontawesome_stylesheets(){
wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css' );
}
add_action( 'wp_enqueue_scripts','wpschool_include_fontawesome_stylesheets' ); Способ 2. Подключение внешней таблицы стилей
Этот способ является более простым в использовании. Для этого в том же файле functions.php должны присутствовать следующие строки:
function wpschool_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','wpschool_include_fontawesome_stylesheets' ); Как использовать шрифт Awesome (и шрифты значков в целом)?
Шрифт Awesome можно использовать на сайте двумя разными методами. Каким образом вы это реализуете, полностью зависит от вас и потребностей вашего проекта.
CSS-метод
В этом способе для добавления значка применяются CSS-псевдоэлементы: :before или :after для стилизирования желаемого HTML-элемента.
Тут следует определить элемент, к которому нужно применить нужный значок и добавить отступы в пикселях (px – это).
Каждый элемент (значок) шрифта имеет свой уникальный код, который сообщает браузеру, что вы хотите отобразить символ, соответствующий этому коду. content и font-family являются основными свойствами, которые необходимо установить к их соответствующим значениям (так, чтобы появился псевдоэлемент).
Для примера отобразим красивую кнопку.
<!-- CSS-стили -->
<style>
.my-button{
display: inline-block;
padding: 8px 12px;
background: #eee;
border: solid 1px #D5D5D5;
}
.my-button span{
display: inline-block;
}
.my-button span:before{
font-family: 'FontAwesome';
content: '\f085';
position: relative;
margin-right: 5px;
font-size: 110%;
}
</style>
<!-- HTML-содержимое -->
<div class="my-button">
<span class="text"> Settings Menu </span>
</div> В итоге на экране браузера вы увидите следующее:
Для отображения значка с несколькими шестеренками мы использовали соответствующий код этого значка – \f085 (его можно посмотреть на странице с образцом).
HTML-метод
Этот способ является более простым в использовании, так как позволяет вставить иконку непосредственно в тексте HTML-страницы. В этом случае значок шрифта будет автоматически генерировать псевдоэлементы before/after, создавая стиль для значка.
Если вы хотите отобразить значок, вам нужно назначить класс fa-элементу (как правило, такие элементы, как <i> и <span>, работают лучше всего). Этот класс связывает ваш элемент со шрифтом Font Awesome.
Когда ваш элемент будет иметь базовый класс fa, вы можете добавить имя класса, соответствующее значку, который вы хотите отобразить. Например, если нужно вывести значок камеры, то следует добавить класс fa-camera-retro.
<i class="fa fa-camera-retro"></i>
В итоге браузер отобразит следующее:
В этом случае вы можете создавать более привлекательные элементы, используя дополнительные классы Font Awesome для применения размеров, поворота, цветов и стилей.
Для примера отобразим красивое навигационное меню сайта, используя Font Awesome.
<!-- CSS-стили -->
<style>
.nav-list .nav-item{
display: block;
}
.nav-item .nav-link:first-child{
border-top: solid 1px #ccc;
}
.nav-item .nav-link{
display: block;
padding: 8px 12px;
background: #eee;
border: solid 1px #ccc;
border-top: 0px;
color: #333;
}
.nav-link > i {
margin-right: 10px;
}
</style>
<!-- HTML-содержимое -->
<nav class="menu">
<ul class="nav-list">
<li class="nav-item">
<a href="/" class="nav-link">
<i class="fa fa-home fa-fw"></i>
<span>Homepage</span>
</a>
<a href="/users" class="nav-link">
<i class="fa fa-user fa-fw"></i>
<span>Our Users</span>
</a>
<a href="/tags" class="nav-link">
<i class="fa fa-tag fa-fw"></i>
<span>View Tags</span>
</a>
</li>
</ul>
</nav> Результат:
И еще один пример – привлекательный блок с социальными иконками.
<!-- CSS-стили -->
<style>
.social-bar {
text-align: center;
}
.social-bar .header{
display: inline-block;
margin: 0px 7px 0px 0px;
border-bottom: solid 1px;
font-size: 110%;
}
.social-bar .icon{
display: inline-block;
}
.social-bar .icon > .back{
background: #333;
}
.social-bar .icon > .front{
color: #fff;
}
</style>
<!-- HTML-содержимое -->
<div class="social-bar">
<p class="header">Join our social media </p>
<a href="https://www.facebook.com/">
<span class="icon fa-stack fa-lg">
<i class="back fa fa-square fa-stack-2x"></i>
<i class="front fa fa-facebook fa-stack-1x"></i>
</span>
</a>
<a href="https://twitter.com/">
<span class="icon fa-stack fa-lg">
<i class="back fa fa-square fa-stack-2x"></i>
<i class="front fa fa-twitter fa-stack-1x"></i>
</span>
</a>
<a href="https://www.pinterest.com/">
<span class="icon fa-stack fa-lg">
<i class="back fa fa-square fa-stack-2x"></i>
<i class="front fa fa-pinterest fa-stack-1x"></i>
</span>
<a>
</div> 
Совмещенные иконки работают, обертывая их вокруг другого элемента и применяя к нему класс fa-stack.
Значки, которые вы хотите совместить, также должны будут использовать класс fa-stack. Вы можете указать необходимый размер, используя классы размера, такие как fa-stack-1x и fa-stack-2x.
В качестве заключения
Можно сделать вывод, что не зря большинство современных веб-разработчиков используют иконочные шрифты. Ведь они, во-первых, являются простыми в использовании. Для отображения значка вам нужно будет только применить нужные классы. Также можно настроить таргетинг самого элемента на JavaScript/jQuery, а затем добавлять или удалять классы для изменения отображаемого значка.
Иконочные шрифты предлагают множество разных стилей и действий на выбор, в том числе многоуровневые значки, анимация, размер и позиционирование. Все они будут корректно отображать в любом веб-браузере и на любом устройстве.
Хотите крутые блоки внимания на своем сайте? Плагин WPRemark предоставляет такую возможность. Большой выбор иконок, рамок и общего оформления.
* Facebook — признан экстремистской организацией и запрещен на территории РФ.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
