В настоящее время 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 с помощью удобного генератора.
Номер 2: Использование коротких кодов
[icon name="flag" class="2x spin border"]
Номер 3: Хорошо известный HTML-тег
Настройки плагина:
Найдите настройки в разделе »Настройки => Лучший шрифт«.
Здесь вы можете выбрать, какую версию Font Awesome вы хотите использовать. Рекомендуется самая новая версия, в настоящее время версия 4.6.3. Второй вариант обеспечивает более быструю загрузку сжатого файла CSS. Вы должны отметить это.
Третий вариант делает так, что другие файлы Font Awesome, которые используются другими плагинами, удаляются из «Better Font Awesome». Вы также должны отметить это, так как одной версии файла вполне достаточно.
Четвертая область в настройках поможет вам, если вы хотите использовать шорткод или тег HTML.
Также есть версия JavaScript
Верно. Это существует. Вы можете ввести свой адрес электронной почты в пункте меню «Начать», чтобы получить код JavaScript, который всегда поддерживает актуальность шрифта значка.
Однако у этого кода есть огромный недостаток. Хотя вы можете убедиться, что код доставляется асинхронно после регистрации, он все равно загружается довольно медленно. Я попробовал это для этой статьи, и я не был впечатлен. Мой веб-сайт был на 400 миллисекунд медленнее, чем со связанным файлом CSS.
Таким образом, я не могу рекомендовать этот вариант.
Заключение
Теперь я познакомил вас с двумя способами использования крутых иконок Font Awesome. Предпочитаете ли вы руководство или версию плагина, зависит от вас. Я рекомендую оба варианта, исключая только версию JavaScript.