Как использовать Font Awesome с WordPress

Как использовать Font Awesome с WordPress
Font Awesome — один из самых популярных иконочных шрифтов в мире. К настоящему времени более 60 миллионов веб-сайтов используют этот шрифт для отображения пиктограмм во всех цветах и ​​версиях. Эти 60 миллионов веб-сайтов включают whitehouse.gov, thebeatles.com и Washingtonpost.com. В этой статье мы покажем вам, как вы можете использовать значки для своего блога.

В настоящее время Font Awesome предоставляет 634 пиктограммы для множества приложений. Например, их можно использовать для создания значков социальных сетей, как я сделал в своем блоге.

значки социальных сетей

Содержание

Преимущества иконочного шрифта «Font Awesome».

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

Это может быть существенно для бизнес-сайта, если есть фирменный стиль, которого нужно придерживаться. Корректировки происходят через CSS. Таким образом, все, что может сделать CSS, возможно. Возможны размер, цвета, тень текста и многое другое.

На следующей странице вы можете взглянуть на все 634 значка в обзоре.

Как использовать Font Awesome в вашей теме

Есть два варианта использования шрифта в вашей теме. Я представлю их вам один за другим. Какой метод вы выберете, зависит от того, предпочитаете ли вы более простой способ использования плагинов или более утомительную ручную работу. В любом случае, вы найдете правильный метод для вас в этой статье.

1 — Ручная работа. Мы только связываем файл CSS

Прежде чем вы сможете использовать значки, вам понадобится CSS для шрифта значков. Поставщик услуг CDN KeyCDN разместил шрифт на своих серверах. Таким образом, достаточно простой ссылки на файл в шапке сайта. Небольшой фрагмент кода, который вам нужно скопировать в папку вашей темы. functions.php позаботится об этом.

Вы можете выбрать один из двух методов. Код номер один связывает файл CSS в заголовке вашего блога. Второй код идеален, если вы хотите оптимизировать скорость своего сайта. Затем файл загружается в нижний колонтитул.

https://gist.github.com/anonymous/b4b2ce4d8af44503e501f70f86f3173b

https://gist.github.com/anonymous/27c9e331dd9a08a59cbc863bb31f4a17

Теперь вы уже можете использовать значки. У вас есть два варианта ручного применения. Вариант номер один — это тег, предоставляемый Font Awesome для каждой иконки. Взгляните на множество примеров на странице примеров.

Настройка размера значка очень проста.
Настройка размера значка очень проста.

Однако вы не привязаны к тегу, но также можете определять и использовать значки в CSS. Это полезно для областей, которые плохо переносят дополнительную разметку. Кстати, Less и Sass поддерживаются так же, как и чистый CSS.

Когда вы щелкаете значок на обзорной странице Font Awesome, вы попадаете на страницу, на которой отображается конкретный тег. Кроме того, вы также найдете так называемый Unicode, который требуется для использования в файле CSS.

Часть моего CSS для кнопок социальных сетей (скриншот выше) выглядит следующим образом:

https://gist.github.com/anonymous/791df49ad67685ccdfbf5558d657091b

Найдите Юникод здесь:

шрифт потрясающий юникод

Использование иконочного шрифта в редакторе WordPress

Конечно, вы также можете использовать аккуратные значки непосредственно в редакторе WordPress при написании своих статей. Для этого вам нужно посетить текстовую область и ввести соответствующий тег там, где вы хотите, чтобы он отображался.

Посетите обзорную страницу Font Awesome, выберите значок и щелкните по нему. На следующей странице вы найдете правильный тег для этого значка.

2 — Easy Peasy, используя плагин «Better Font Awesome».

лучший шрифт потрясающий

  • Разработчик: Микки Кей
  • В работе: да
  • Последняя версия от: 06.01.2016
  • Стоимость: бесплатно через WordPress.org
  • Лицензия: ОБЩАЯ ПУБЛИЧНАЯ ЛИЦЕНЗИЯ GNU
  • Известные проблемы совместимости: неизвестно
  • Домашняя страница разработчика: неизвестно
  • Скачать на WordPress.org

Использование этого плагина не замедлит ваш блог, так как необходимый файл CSS загружается через CDN jsDelivr. Плагин идеально подходит для начинающих WordPress, так как не требует никаких знаний в области программирования.

С этим плагином использовать иконки очень просто. Есть три способа их использования.

Номер 1: Непосредственно в редакторе WordPress с помощью удобного генератора.

скриншот-1Номер 2: Использование коротких кодов

[icon name="flag" class="2x spin border"]

Номер 3: Хорошо известный HTML-тег