Ноя
6
25

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

Шрифт Font AwesomeFont 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;
}

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

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

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

Font Awesome в меню

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

Иконки Font Awesome в меню

Каждый пункт меню имеет свой конкретный 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 отвечает за конкретный пункт. В итоге получится такое.

Иконки Font Awesome в меню

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

Шрифт 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;
}

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

Шрифт Font Awesome в вордпресс

Я тестировал все три варианта на данном блоге, но к сожалению, вместо иконок у меня выводились какие-то «кракозябры». Вероятно, что-то не так с кодировкой или из-за специфических настроек блога. Однако на другом проекте все иконки отобразились корректно, поэтому код полностью рабочий. Единственное были сложности с примером номер 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, к сожалению, не знаю. Визуальный режим, как правило, удаляет все коды, такова его работа. Нужно гуглить что-то по этой теме в англоязычном интернете, я наших блогах такие статьи не встречал.

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

(следующая статья)

Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости