Ноя

Использование иконок шрифта Font Awesome в WordPress

Font Awesome — это один из тех шрифтов, где вместо букв содержатся разные иконки: начиная от каких-то системных изображений по типу галочек, звездочек, папок и заканчивая иконками смартфонов, автомобилей, техники и т.п. При подключении шрифта на сайт вы можете использовать и размещать их на страницах своего веб-проекта. Сегодня рассмотрю пару базовых примеров дабы вы поняли зачем это нужно, как выглядит и как реализуется. Использовать мы будем шрифт Font Awesome хотя подобных бесплатных шрифтов с иконками есть несколько.

Итак, для его подключения шрифта нужно в файл функций functions.php добавить следующий код:

add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
 wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

Ну, а теперь перейдем к примерам. Я взял их из этой статьи вместе со скриншотами, надеюсь автор будет не против:)

Использование Font Awesome в тексте

В текстовом редакторе переключаетесь в обычный HTML режим. Там пишете код, указанный ниже, и сохраняете текст, не переходя в визуальный режим:

<i class="fa fa-phone"></i> +91 1234567890

В файле стилей CSS при этому добавляете:

.fa-phone {
font-size: 25px;
vertical-align: middle;
padding-right: 5px;
}

В итоге получится такая иконка возле текста:

Список всех иконок найдете тут возле каждой из них увидите название класса, что сможете использовать. Единственное, что перед ним обязательно нужно указывать также и класс fa (см. код примера выше).

Font Awesome в меню

Использование данного шрифта — один из вариантов подключения иконки в меню WordPress. Здесь нужно внимательно изучить HTML код страницы, а точнее вашего блока навигации. Просматривая его увидите что-то вроде такого:

Каждый пункт меню имеет свой конкретный ID, для которого вы можете задавать стили отдельно. Кроме того, можно будет использовать класс для всего меню, для указания общих настроек. В style.css добавляете код, аналогичный следующему:

.menu-primary li a:before {
 font-family: FontAwesome;
 padding-right: 7px;
 /*font-style: normal;
 font-weight: normal;
 text-decoration: inherit;*/
}
 
/* Home menu item */
#menu-item-1616 a:before {
 content: "\f015";
}
 
/* Pages menu item */
#menu-item-1413 a:before {
 content: "\f0e8";
}
 
/* Categories menu item */
#menu-item-1414 a:before {
 content: "\f15b";
}

Сравните код с картинкой выше и вы поймете логику: menu-primary — общий стиль для меню, а menu-item отвечает за конкретный пункт. В итоге получится такое.

Значение для параметра content найдете на сайте Font Awesome при переходе на страницу с конкретной иконкой.

Здесь и значение Unicode, и имя класса, который нужно использовать в тексте (как для первого примера).

Font Awesome в заголовке виджета

Вы можете добавить иконку в заголовок того или иного виджета в WordPress. Для этого вам только нужно узнать какой Class или ID у него указан (просматриваете HTML код). Далее в файле стилей добавляете что-то вроде:

#meta-3 .widget-title:before {
font-family: FontAwesome;
padding-right: 7px;
content: "\f05a";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}

В итоге возле заголовка выводится иконка.

Я тестировал все три варианта на данном блоге, но к сожалению, вместо иконок у меня выводились какие-то «кракозябры». Вероятно, что-то не так с кодировкой или из-за специфических настроек блога. Однако на другом проекте все иконки отобразились корректно, поэтому код полностью рабочий. Единственное были сложности с примером номер 2 (меню), общие свойства не хотели срабатывать и пришлось прописать font-family: FontAwesome для каждого из пунктов меню.

Зачем вообще нужны Font Awesome и шрифты из иконок? Они легко масштабируемы, поддерживают кроссбраузерность, позволяют легко менять цвета иконки, а также добавлять эффекты (тень и т.п.). К тому же, насколько я понимаю, подгружаются эти элементы быстрее изображений, что экономит вам немного времени при загрузке страницы. В целом, штука достаточно интересная.

Оцените статью:

(голосов - 9, средний балл: 5,56 из 7)

Загрузка...

Категории: Возможности; Хаки и секреты;

Теги: дизайн, меню и навигация, оформление блога, полезное для блога, сниппеты, улучшаем блог, шрифты.

комментариев 25 к статье “Использование иконок шрифта Font Awesome в WordPress”

Maxim 18.11.2014
Отличная статья! Спасибо! Вопрос: как сделать тоже самое, но без php? У меня простенький сайт, файлы *.html.
Tod 19.11.2014
Maxim, посмотрите на сайте Font Awesome разделы «Get Started» и «Examples» — там будет информация о подключении иконок на свой сайт, все реализуется через CSS.
Maxim 26.01.2015
Тод, понял. Отказался от идеи. ВП виснет из-за долгой загрузки удалённого css.
Роман llgr 21.02.2015
Я пользуюсь «Fontello — icon fonts generator» он лучше тем, что можно выбирать какие именно иконки тебе нужны, и загружать только их, а не всю базу, да и шрифт лежит по умолчанию на твоём блоге. Хотя конечно нужно проделать лишние действия, это оттолкнёт некоторых веб-мастеров.
Марат 06.02.2016
Здравствуйте!

Не могу определить какой класс отвечает за определенный пункт рубрики (использую Firebug для Firefox)
Вроде понял что это class=»cat-item cat-item-55″>
Прописываю в CSS вот такой код:

.cat-item cat-item-55:before {
font-family: FontAwesome;
content: «f07c»;
color:#ff0000;
}

Не работает! Что не так делаю?
Tod 06.02.2016
Марат, если что-от не работает желательно тестить в редакторе или в том же фаербаге разные варианты. У меня получилось при использовании конструкции: li.cat-item.cat-item-55::before
Марат 06.02.2016
Я и тестил разные варианты. Ваш вариант тоже не работает…
Tod 06.02.2016
Марат, странно. Поставьте в качестве content другие варианты, у меня было «…» и сработало. Возможно проблема не в CSS, а в подключении Font Awesome.
Как вариант, найти в стилях код, который сейчас используется для вывода иконок перед списком категорий и попытаться модифицировать его.
Марат 06.02.2016
Поменял content на «f05a»/
Font Awesome я уверен подключен по умолчанию, так как просто на тестовой странице конструкция fa-camera-retro работает.
Поменял вашу конструкцию на: .cat-item.cat-item-55:before {
Меняется только цвет иконки по умолчанию (можете сейчас посмотреть).
Модифицировать код не могу, так как тема WordPress периодически обновляется…
Tod 06.02.2016
Марат, добавьте !important для content дабы перекрыть стиль оригинальной темы.
Марат 06.02.2016
Сделал вот так:

.cat-item.cat-item-55:before {
font-family: FontAwesome;
content: «\f05a» !important;
color:#ff0000;
}

Не работает.
Tod 06.02.2016
Марат, я смотрю через инспектор в браузере, у меня пишет — некорректное значение свойства для content. Значение отображается как «». Меняю на «…» — срабатывает. Кавычки правильные? редактируете онлайн на сайте? кодировка файла utf?
Марат 06.02.2016
Да, дело было в кавычках! Спасибо большое!
Теперь желательно прописать до этого код как у Вас в примере. Чтобы не прописывать каждый раз font-family: FontAwesome для каждой иконки.
Tod 06.02.2016
Марат, кстати, если вам нужны одинаковые иконки для всех категорий, то пропишите просто код для класса cat-item (он только в категориях, вроде бы, и присутствует).
Марат 06.02.2016
Спасибо! Но хочу использовать разные иконки, если подберу под названия своих рубрик :)
Хотел подписаться на Ваш блог, не нашел где…
Tod 06.02.2016
Марат, можете найти ссылки для подписки в конце статьи или сверху сайдбара. Либо вот линк на подписку по почте.
Марат 06.02.2016
Да, спасибо, подписался.
Как увеличить размер этих иконок можете подсказать?
Марат 06.02.2016
Цвет у иконок какой-то светлый, хотя принудительно ставлю черный цвет. Хотя может быть так оставить? Как думаете?
Еще хотелось бы порядок сортировки рубрик другой. Придется наверное плагин сортировки ставить какой нибудь…
Tod 07.02.2016
Марат, цвета и размеры текста — все это делается в CSS. Если цвет не меняется, то возможно вы указываете его не для того элемента. Нужно изучать имеющиеся стили. Если нужен произвольный порядок сортировки, то проще всего использовать меню.
Марат 07.02.2016
Если нужен произвольный порядок сортировки, то проще всего использовать меню…
Нужно будет какие то изменения вносить в файлы темы?
Tod 08.02.2016
Марат, да нужно. Там по ссылке есть описание установки меню.
Марат 08.02.2016
Мне нельзя вносить изменения в файлы темы, так как она периодически обновляется…
Tod 09.02.2016
Марат, тогда можно воспользоваться виджетом «Произвольное меню», он позволяет добавить в шаблон созданное меню в админке.
Beleduc 26.09.2017
Не подскажите как сделать что бы редактор текста в визуальном режиме не удалял код иконок?
Tod 27.09.2017
Beleduc, к сожалению, не знаю. Визуальный режим, как правило, удаляет все коды, такова его работа. Нужно гуглить что-то по этой теме в англоязычном интернете, я наших блогах такие статьи не встречал.

Оставить комментарий

Использование иконок шрифта Font Awesome в WordPress

Использование Font Awesome в тексте

Font Awesome в меню

Font Awesome в заголовке виджета

Похожие статьи:

комментариев 25 к статье “Использование иконок шрифта Font Awesome в WordPress”