Дизайн сайта строится на многих вещах: цвет, оформление, стиль и, конечно же, веб-иконки. Они одушевляют неодушевленное, то есть если взять пустой графический квадрат, то он небогат смыслом, а если к нему добавить веб–иконку, к примеру, конверт, то это уже будет указатель со значением. В просторах интернета можно найти сотни сайтов с исходниками иконок или специальные сервисы с поиском веб – иконок.
Но, помимо всего прочего, есть возможность добыть иконки другим путем, о чем сейчас и пойдет речь. Имеется в виду шрифт 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/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 — не получается. Не силен в таких вопросах.
Ну, простой вариант...
или...
Спасибо, попробую.
Работает! Еще раз благодарю.
Не за что.