Дизайн сайта строится на многих вещах: цвет, оформление, стиль и, конечно же, веб-иконки. Они одушевляют неодушевленное, то есть если взять пустой графический квадрат, то он небогат смыслом, а если к нему добавить веб–иконку, к примеру, конверт, то это уже будет указатель со значением. В просторах интернета можно найти сотни сайтов с исходниками иконок или специальные сервисы с поиском веб – иконок.
Но, помимо всего прочего, есть возможность добыть иконки другим путем, о чем сейчас и пойдет речь. Имеется в виду шрифт Font Awesome – это Клондайк веб-иконок численность, которых, свыше 450 шт. Плюсом является не только количество, но и удобство в применении. А также еще можно подчеркнуть векторное значение, что при изменении размера иконки, качество не портится.
Подключаем шрифт Font Awesome на WordPress
Процедура довольно стандартная и устанавливается буквально в пару шагов. Первым делом скачиваем шрифт Font Awesome с сайта разработчиков. В скаченном файле вы обнаружите ZIP архив. Извлекаем из архива содержимое, в нем находится папка с названием шрифта и актуальной на данный момент версией. В основной папке имеются еще подпапки: стили, шрифты и т.д.
Вторым действием является непосредственно загрузка шрифта Font Awesome на хостинг. Подключитесь к сайту через любой FTP – клиент и закиньте ранее скаченную папку в установленную вами тему.
Последнее что осталось сделать — это подключить стили. Одна из подпапок носит название «CSS» в нем находится два файла: font-awesome.css, font-awesome.min.css они одинаковые, разница лишь в форматировании. В этих файлах заданы все нужные стили и импорт шрифта. Вот почему необходимо подключить один из них. Откройте файл header.php и между тегами <head> </head> подключите стили.
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/font-awesome-4.2.0/css/font-awesome.css" />
Главное, укажите относительный путь, если меняете название папок, то не забываем менять и в подключении стилей.
Способ №2
А можно пойти совсем простым путем и подключить шрифт Font Awesome не загружая себе на сайт, а импортировать напрямую (подключение CDN). Для этого в файле functions.php вставьте следующий код:
function font_awesome() {
if (!is_admin()) {
wp_register_style('font-awesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('font-awesome');
}
}
add_action('wp_enqueue_scripts', 'font_awesome');
Чтобы не возникло ошибки вставляйте код в конце перед знаком ?>.
Примеры использования шрифта Font Awesome
После подключения шрифта на WordPress становятся доступны все его возможности. Как упоминалось выше насчет количества иконок, то с полным каталогом можете ознакомиться по ссылке. При нажатии на одну из иконок вы увидите соответствующий ее класс для применения.
Простой пример.
HTML
<div class="e1"> <i class="fa fa-download"></i> Скачать файл! </div>
CSS
.e1 {
background: #555;
width: 150px;
padding: 10px;
text-align: center;
color: #fff;
}
.fa-download {
color: #6fe332;
font-size: 23px !important;
padding-right: 5px;
}
Для оформления иконки используйте ее класс как показано в примере и смело меняйте цвет, размер расположение и т.д.
Есть еще одна особенность. Ведь не всегда удобно добавлять иконку так, как показано выше, через тег <i>. Можно использовать Unicode добавляя основному классу псевдоэлемент и выводить иконку через content: "";.
Простой пример.
HTML
<div class="e1">Нравится</div>
CSS
.e1 {
background: #eee;
margin: 200px;
padding: 10px;
text-align: center;
width: 120px;
color: #555;
box-shadow: 0 0 2px #919191;
}
.e1:before {
content: "\f004";
font-family: FontAwesome;
padding-right: 5px;
color: #cc0000;
}
Обратите внимание на две первые строчки в классе с псевдоэлементом (.e1:before). В первой задается Unicode, а во второй название шрифта. Это нужно чтобы элемент не присвоил шрифт от своего родителя. Полный список Unicode находится по ссылке. Просто копируйте иконку и вставляйте между кавычками в content: "";.
Вопросы задавайте в комментариях, буду рад помочь.
Спасибо за публикацию. Пригодилась как раз кстати.
Не за что. Приходите еще)
Спасибо большое за статью! Очень пригодилась
Рад был помочь)
Возможно ли инконки Font Awesome соединить с пунктами меню? Чтобы генерировалось меню такого типа:
А для чего? Если нужно установить иконки в меню, то используйте индивидуальные классы пунктов меню. И через псевдоэлементы css (before, after) добавляйте Unicode-иконки.
Здравствуйте, Андрей. Вот всё хорошо, но только вместо кириллицы знаки вопросов, что не так? Сайт в разработке
Здравствуйте! Добавьте в файл
htaccessкодировкуAddDefaultCharset UTF-8.Спасибо. Очень грамотно и полезно.
Не за что. Рад помочь.
У меня такой вопрос — а как сделать изменение цвета, а в идеале поменять иконку при наведении курсора? Перепробовал разные варианты в стилях с использованием hover — не получается. Не силен в таких вопросах.
Ну, простой вариант...
<a href="#" class="buttonfont2" rel="nofollow"><i class="fa fa-envelope-open" aria-hidden="true"></i> Текст ссылки</a> .buttonfont2:hover .fa-envelope-open::before{ color: red; content:""; }или...
<a href="#" class="buttonfont" rel="nofollow">Текст ссылки</a> .buttonfont::before { color: grey; content:''; font-family: FontAwesome; font-size: 16px; margin-right: 5px; } .buttonfont:hover::before{ color: red; content:""; }Спасибо, попробую.
Работает! Еще раз благодарю.
Не за что.