Шрифт Font Awesome: Подключение на WordPress и применение

Графика и Дизайн WordSmall

Дизайн сайта строится на многих вещах: цвет, оформление, стиль и, конечно же, веб-иконки. Они одушевляют неодушевленное, то есть если взять пустой графический квадрат, то он небогат смыслом, а если к нему добавить веб–иконку, к примеру, конверт, то это уже будет указатель со значением. В просторах интернета можно найти сотни сайтов с исходниками иконок или специальные сервисы с поиском веб – иконок.

Но, помимо всего прочего, есть возможность добыть иконки другим путем, о чем сейчас и пойдет речь. Имеется в виду шрифт 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;
}

Шрифт Font Awesome: Подключение на WordPress и применение

Для оформления иконки используйте ее класс как показано в примере и смело меняйте цвет, размер расположение и т.д.

Есть еще одна особенность. Ведь не всегда удобно добавлять иконку так, как показано выше, через тег <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;
}

Шрифт Font Awesome: Подключение на WordPress и применение

Обратите внимание на две первые строчки в классе с псевдоэлементом (.e1:before). В первой задается Unicode, а во второй название шрифта. Это нужно чтобы элемент не присвоил шрифт от своего родителя. Полный список Unicode находится по ссылке. Просто копируйте иконку и вставляйте между кавычками в content: "";.

Вопросы задавайте в комментариях, буду рад помочь.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 6
  • Егор

    Спасибо за публикацию. Пригодилась как раз кстати.

    • WordSmall

      Не за что. Приходите еще)

  • Ольга

    Спасибо большое за статью! Очень пригодилась :)

  • Дмитрий

    Возможно ли инконки Font Awesome соединить с пунктами меню? Чтобы генерировалось меню такого типа:

    • WordSmall

      А для чего? Если нужно установить иконки в меню, то используйте индивидуальные классы пунктов меню. И через псевдоэлементы css (before, after) добавляйте Unicode-иконки.

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