Шрифт Font Awesome: Подключение на WordPress и применение
Дизайн сайта строится на многих вещах: цвет, оформление, стиль и, конечно же, веб-иконки. Они одушевляют неодушевленное, то есть если взять пустой графический квадрат, то он небогат смыслом, а если к нему добавить веб–иконку, к примеру, конверт, то это уже будет указатель со значением. В просторах интернета можно найти сотни сайтов с исходниками иконок или специальные сервисы с поиском веб – иконок.
Но, помимо всего прочего, есть возможность добыть иконки другим путем, о чем сейчас и пойдет речь. Имеется в виду шрифт Font Awesome – это Клондайк веб-иконок численность, которых, свыше 450 шт. Плюсом является не только количество, но и удобство в применении. А также еще можно подчеркнуть векторное значение, что при изменении размера иконки, качество не портится.
Подключаем шрифт Font Awesome на WordPress
Вторым действием является непосредственно загрузка шрифта Font Awesome на хостинг. Подключитесь к сайту через любой FTP – клиент и закиньте ранее скаченную папку в установленную вами тему.
Последнее что осталось сделать — это подключить стили. Одна из подпапок носит название «CSS» в нем находится два файла: font-awesome.css, font-awesome.min.css они одинаковые, разница лишь в форматировании. В этих файлах заданы все нужные стили и импорт шрифта. Вот почему необходимо подключить один из них. Откройте файл header.php и между тегами подключите стили.
Главное, укажите относительный путь, если меняете название папок, то не забываем менять и в подключении стилей.
Способ №2
А можно пойти совсем простым путем и подключить шрифт Font Awesome не загружая себе на сайт, а импортировать напрямую (подключение CDN). Для этого в файле functions.php вставьте следующий код:
Примеры использования шрифта Font Awesome
HTML
Для оформления иконки используйте ее класс как показано в примере и смело меняйте цвет, размер расположение и т.д.
HTML
Вопросы задавайте в комментариях, буду рад помочь.
Как установить иконки Font Awesome 4.7 на WordPress сайт
Введение
Если вы заинтересованы сделать дизайн сайта более привлекательным — разместите на сайте тематические иконки. Лучше в качестве иконок используйте иконочный шрифт.
Иконочный шрифт — это шрифт, где вместо букв и цифр содержатся символы и специальные знаки. Вы можете использовать их как обычный текст и оформлять отображение через CSS так же, как это делается с текстом.
Пожалуй, самый известный иконочный шрифт — это Font Awesome.
В этой статье приведены способы добавления иконочного шрифта Font Awesome 4.7 на сайт WordPress.
1. Как добавить Font Awesome 4.7 на сайт WordPress с помощью кода
Иконки Font Awersome можно добавить на сайт Wordprecc двумя способами: с использованием кода или с помощью плагина. Если не хотите разбираться с кодом — смотрите ниже как установить шрифт с помощью плагина.
По сути, для использования шрифта на сайте нужно сделать два шага: первый — подключить таблицу стилей (CSS) шрифта к сайту; второй — найти нужную иконку и вставить ее в текст на сайте.
Подключить таблицу стилей можно несколькими способами: подключить шрифт с CDN или загрузить только шрифт к себе на сайт.
Подключение всего шрифта Font Awesome 4.7 к теме WordPress
Самый простой способ подключить Font Awesome 4.7 — загружать иконочный шрифт с CDN. Ранее для этого предлагалось вставить в «шапку» сайта (файл header.php) следующий код:
И хотя такой код еще работает, официальный сайт Font Awesome предлагает немного другой подход.
Код подключения Font Awesome 4,7 в письме будет примерно в таком виде:
где «имя-встариваемого-файла» — уникальный код файла.
Зарегистрируйтесь на CDN Font Awesome. После регистрирации на сайте https://cdn.fontawesome.com вы можете получить доступ к дополнительным настройкам шрифта. Ссылка для регистрации приведена в письме.
Куда на своем сайте вставить код Font Awesome 4.7
Способ 1. Код в header.php
Вставить код подключения иконок можно в «шапку» сайта (файл header.php).
Например, для темы Divi код можно вставить в настройках темы:
Способ 2. Код в файл functions.php
Еще одни способ подключения иконок — добавить код в файл functions.php (в этом случае в header.php ничего добавлять не надо, конечно):
Приведенный выше код желательно вставить в файл function.php дочерной темы, тем самым сохранив его при обновлении темы:
Способ 3. Разместить шрифт в папке на сайте
Можно скачать файл с шрифтом Font Awersome и разместить его в папку на своем сайте. Для подключения шрифта тогда используйте код, вставив его в шапку сайта:
где «path/to» — путь к файлам шрифта.
Как использовать шрифт Font Awesome в контенте сайта WordPress
После того, как код CSS подключен к теме, можно начать использовать шрифт Font Awesome на сайте.
Чтобы найти полный список иконок, перейдите на веб-сайт Font Awesome в список иконок и найдите нужную иконку.
Например, если вы хтите разместить иконку «загрузить» (download). Задайте поиск среди иконок и выберите одну из списка, нажав на нее:
Нажмите на выбранной иконке и увидите иконку Font Awesome в различных размерах. Внизу размещен блок кода для вставки на сайте:
Скопируйте этот код и вставьте его в любом месте содержимого сайта WordPress. Правда, код надо вставлять на вкладке «Текст» редактора.
Как добавить Font Awesome в WordPress?
В настоящее время пользователи WordPress стремятся привнести больше визуального дизайна на свой сайт. В течение многих лет дизайнеры и разработчики полагались на свое воображение и исполнение, чтобы привнести визуальный дизайн на свой веб-сайт. Но как насчет обычных пользователей, у которых нет никаких знаний в области программирования или дизайна?
Font Awesome – ключ к их проблеме. Используя Font Awesome, вы можете добавлять значки в WordPress без каких-либо знаний в области программирования или дизайна.
В этой статье мы хотели бы обсудить добавление Font Awesome в WordPress.
Что такое Font Awesome?
Font Awesome – самый популярный плагин для добавления иконок шрифтов в WordPress. В настоящее время у него более 80 000 активных установок, и он совместим с последней версией WordPress. Font Awesome предлагает множество функций, например:
Как добавить Font Awesome в WordPress с помощью плагина?
Как упоминалось выше, Font Awesome имеет множество преимуществ, и практически необходимо иметь хорошо разработанный веб-сайт. Есть много способов добавить Font Awesome в WordPress.
Как всегда, самый простой способ сделать это – использовать плагин. Чтобы добавить Font Awesome в WordPress, выполните следующие действия:
Что такое значок шрифта? Почему мы должны добавить это в WordPress?
В течение многих лет разработчики и дизайнеры полагались на разработку и воплощение своих идей в виде изображений на своих веб-сайтах. Однако с развитием иконок шрифтов мир визуального дизайна упростился. Значки шрифтов являются адаптивными и полностью настраиваемыми значками, которые в некоторых случаях заменяют традиционные изображения или спрайт-листы.
Как вы, наверное, понимаете по названию, иконки шрифтов – это именно то, что вы думаете. Этот шрифт полностью состоит из иконок. Например, в обычном шрифте используются обычные символы. Однако значок шрифта заменяет символы другими символами. Например, если вы нажмете «a» на клавиатуре, отобразится дом.
Вопрос, который до сих пор остается без ответа, – зачем нам использовать иконки шрифтов? Как упоминалось выше, изображения были нашим инструментом номер 1 в течение многих лет. Однако значки шрифтов дают нам гибкость, которой у нас не было с изображениями. Они просты в использовании и очень отзывчивы.
Иконки шрифтов – это векторные изображения, которые можно масштабировать до любого размера без потери качества. Как упоминалось выше, значками шрифтов можно управлять так же, как и обычными повседневными шрифтами, которые мы используем. Вы можете изменить цвета, выравнивание, высоту, стиль и т.д.
Иконки шрифтов совместимы практически со всеми браузерами. Таким образом, вам не следует беспокоиться о том, что некоторые браузеры не могут отображать значки шрифтов, которые вы используете в WordPress.
Существуют тысячи значков шрифтов, которые ограничивают использование изображений на наших веб-сайтах. Хотя обратная сторона иконок шрифтов – это совместимость с платформой. Браузеры отображают эти шрифты, и часто они работают и отображаются по-разному в разных операционных системах.
Добавление Font Awesome в WordPress вручную
Прежде чем мы перейдем к добавлению Font Awesome в WordPress, давайте обсудим создание дочерней темы для активированной темы. Создав дочернюю тему, вы можете сохранить свою основную тему в качестве резервной на случай, если что-то пойдет не так. Вы можете добавить приведенный ниже код в дочернюю тему, так как это намного безопаснее, чем добавление его в основную тему.
Как создать дочернюю тему в WordPress?
Как упоминалось выше, наличие дочерней темы может быть очень полезным. Чтобы создать дочернюю тему, выполните следующие действия:
Как вручную добавить Font Awesome в WordPress?
Мы говорили о добавлении Font Awesome в WordPress с помощью плагина. Теперь давайте поднимем его на ступеньку выше и вручную добавим в WordPress. Как всегда, прежде чем вносить какие-либо изменения, мы рекомендуем сделать резервную копию WordPress на случай, если что-то пойдет не так.
Есть два метода добавления Font Awesome в WordPress вручную:
Подключитесь к своему сайту с помощью FTP-клиента или прямо с панели хостинга. Найдите файл functions.php в папке активированной темы. Загрузите его на свой рабочий стол и откройте с помощью Notepad ++ или любого другого редактора, который вам нравится.
Затем, чтобы использовать бесплатный сервер CDN, используйте следующий код:
Сохраните его и загрузите обратно в папку, из которой вы его скачали.
Вы также можете получить доступ к function.php через свою панель управления. Перейдите в Внешний вид> Редактор тем> Активированная тема> functions.php
Теперь, когда вы вручную добавили Font Awesome в WordPress, просто перейдите на сайт поиска значков Awesome и найдите значок, который вы ищете. Найдя значок, щелкните по нему.
После этого вы получите код для выбранного значка. Все, что вам нужно сделать, это скопировать и вставить код в текстовую вкладку редактора WordPress.
Как изменить отличный стиль шрифта с помощью CSS?
Font Awesome с годами приобрел большую популярность благодаря своей простоте и гибкости. Большинство дизайнеров перестали использовать традиционные изображения и заменили их значками Font Awesome.
Есть много возможных, но простых изменений, которые вы можете внести в значки Font Awesome. Например, вы можете изменить размер значков, повернуть их, изменить цвет и т.д.
Начнем с примера и подробного объяснения каждого из них. Хотя мы научим вас только основам, чтобы найти более сложные модификации, вам нужно проводить больше времени с Font Awesome и воплощать свое воображение.
Как изменить размер иконок Font Awesome?
Самая основная модификация – это изменение размера значка Font Awesome. По умолчанию, когда вы получаете код значка с официального веб-сайта Font Awesome, значки довольно маленькие, и вам может потребоваться изменить их в соответствии с вашими потребностями. Чтобы увеличить размер, используйте следующий код:
Вот пример кода выше. Здесь мы утроили иконку загрузки:
Как вы, наверное, заметили, мы утроили размер значка загрузки.
Как изменить размер иконок Font Awesome? Иконки Font Awesome можно поворачивать под разными углами. Этого легко добиться, используя следующий код, соответствующий вашим потребностям. Используйте тот же метод, что и упомянутый выше, но вместо кода изменения размера используйте следующий код:
Как добавить анимацию в иконки Font Awesome?
Как упоминалось выше, Font Awesome очень гибок, поэтому с помощью приведенного ниже кода вы можете добавить очень простую анимацию к значкам Font Awesome.
Как изменить цвет иконок Font Awesome?
В отличие от приведенных выше модификаций, здесь нет предустановленного кода для изменения значков, вместо этого вам нужно использовать собственный код CSS. Например, если вы используете значок загрузки, чтобы изменить цвет на зеленый, используйте следующий код:
Дополнительный CSS доступен через Внешний вид> Настройщик.
Как вручную добавить Font Awesome в элементы CSS?
Как вы знаете в CSS, каждый код что-то представляет. В Font Awesome каждый код представляет собой значок; и каждый значок имеет уникальный код. С технической точки зрения это известно как Unicode. Он сообщает браузеру, что отображать и как это отображать.
Вам нужно создать уникальный псевдоэлемент и настроить его шрифт для использования вашего семейства значков шрифтов. Затем вы можете установить значение его содержимого. Для этого вам понадобятся:
В приведенном ниже примере будет создана кнопка:
Результат будет выглядеть так:
Как использовать иконки Font Awesome с сервера CDN?
Выше мы упоминали, как вручную использовать CDN для Font Awesome. Просто скопируйте и вставьте код в файл functions.php вашей активированной темы.
Однако лучше, если вы сделаете это с детской темой, а не с реальной темой. Потому что, если вы обновите WordPress и тему, вам придется переделывать весь процесс.
Используя премиум-версию Font Awesome, вы получите доступ к Font Awesome CDN и сможете напрямую получать значки с веб-сайта и использовать их на своем собственном веб-сайте. Цена на премиум-версию – 99 долларов в год.
Как использовать Font Awesome в Elementor?
Elementor – один из самых известных конструкторов страниц во всемирной паутине, и у него много функций, которых нет в обычном редакторе WordPress.
Конструктор страниц Elementor, наряду со многими другими полезными функциями, уже поставляется с иконками Font Awesome. Таким образом, нет необходимости устанавливать какие-либо дополнительные плагины или редактировать файлы ядра вашей темы.
Чтобы получить доступ к значкам Font Awesome, просто используйте виджет значков. Затем перетащите его на страницу.
Кроме того, Font Awesome доступен в виджетах Icon Box и Icon List. Эти виджеты чрезвычайно полезны и могут использоваться в различных сценариях, особенно если у вас нет знаний в области программирования.
Удивительный Лучше шрифт плагин является еще и еще более популярным Удивительный плагин шрифта, используемый в WordPress сообщества. Удивительный шрифт плагин очень полезный плагин. Тем не менее, это связано со многими проблемами, включая:
Это может вызвать множество проблем для веб-сайтов с множеством установленных плагинов и веб-сайтов, которые регулярно обновляются. С другой стороны, плагин Better Font Awesome разработан для работы с шорткодами, созданными с помощью Font Awesome Icons, Font Awesome More Icons и Font Awesome Shortcodes.
Как использовать Font Awesome на WordPress сайте без плагина
В одной из предыдущих статей мы писали об использовании иконочных шрифтов как одном из способов достижения адаптивности картинок на сайте. Здесь ссылка на эту статью. И сегодня мы поговорим об одном из самых популярных иконочных шрифтов – Font Awesome. Сегодня мы на практике посмотрим, как подключить Font Awesome на сайте на движке WordPress без использования плагина и как использовать этот шрифт.
Что такое Font Awesome и в чем его преимущество?
Иконочный шрифт Font Awesome – это шрифт, созданный с помощью значков (иконок), но это ни в коем случае не набор картинок. Почему это различие так важно? Поскольку шрифт Font Awesome:
В настоящее время Font Awesome предлагает набор из 1264 различных и бесплатных иконок, которые вы можете добавить практически в любом месте на своем WordPress сайте. Если вам мало такого количества иконок, тогда переходите на платное Pro.
Как добавить Font Awesome в WordPress вручную (без плагина)
1-й этап: подключение файла стилей шрифта Font Awesome
Первым шагом является добавление CSS-стилей Font Awesome в шаблон header.php активной темы. Добавьте код подключения файла CSS-стилей в секцию :
Этот код подключит файл с таблицей стилей Font Awesome из репозитория Bootstrap по CDN. Вы также можете непосредственно скачать файл стилей с официального сайта Font Awesome (https://fontawesome.com/) и подключить его со своей темы.
Использование иконок Font Awesome
После того, как вы подключили нужные стили в свою тему, вы уже можете начать использовать значки шрифта Font Awesome практически в любом месте сайта.
Чтобы найти полный список иконок, перейдите на официальный сайт Font Awesome в раздел меню Icons и выберите нужный значок. Например, если вы хотите добавить иконку с «пальцем вверх», найдите иконку «thumbs-up» (https://fontawesome.com/icons/thumbs-up?style=regular).
У каждой иконки есть своя страничка, на которой вы можете увидеть приблизительный вид иконки при разных размерах, узнать код Unicode, а также можете скачать иконку в формате SVG. Наибольший интерес в данный момент для нас представляет пример кода для вставки иконки. Например, для иконки с «пальцем вверх», пример кода будет следующим:
Иконки в формате версии 4.7.0 вы можете посмотреть здесь: https://fontawesome.com/v4.7.0/icons/
После того как вы выбрали иконку, скопируйте код для ее подключения и вставьте в нужном месте. Это может быть любой файл шаблон в активной теме. Либо вы можете вставлять иконки через Консоль. При редактировании поста/страницы в режиме Текст добавьте нужный класс для тега i (или, например, тега span ).
При использовании файла стилей Font Awesome разных версий синтаксис формата класса будет разным:
Краткий итог
В сегодняшней статье мы рассмотрели практические моменты добавления иконочного шрифта Font Awesome на свой сайт WordPress. Если у вас есть вопросы по данной теме, озвучьте их в форме комментирования ниже.
Напишите в комментариях свое отношение к использованию Font Awesome, а также поделитесь своими впечатлениями, если вы используете версии 5.x.x этого шрифта.
WordPress.org
Русский
Font Awesome
Описание
Официальный способ использования значков Font Awesome Free или Pro на вашем сайте, предоставленный вам командой Font Awesome.
Features
Our official plugin lets you use Font Awesome the way you want:
Note: The plugin is not compatible on WordPress multisite at this time.
How to Use
Install and enable the plugin
(See the Installation tab for details)
Add icons to your pages and posts
Adding icons works in both the block editor and the classic editor.
Once you’ve set up your plugin, you can search and add icons to your pages and posts by choosing the Font Awesome option in the format bar from any text block to open the Icon Chooser. (If you want to search and add Pro icons in the Icon Chooser, you’ll need to use a Pro Kit.)
Or you can use the icon names in shortcodes or HTML. When you use shortcodes, you add the name of the icon and a prefix, where the prefix is the style of icon you want to use. Note that you don’t need to include the fa- part of the name. And if you don’t include any prefix, the icon will default to the Solid style.
The shortcode for an icon looks like this:
Get the details on all the shortcode options in the Font Awesome WordPress docs.
You can also use basic HTML with standard Font Awesome syntax, like this:
Using Pro Icons and Features
To use a Kit, create a Kit on FontAwesome.com and select «Pro icons» in the settings. Then grab your API Token from your Font Awesome account page to add into the WordPress Kit settings.
To add Pro icons with the CDN, you’ll need to add your domain to the list allowed domains on your Font Awesome account CDN Settings page and use shortcodes or HTML to add the icons into your content.
If you’re using the Icon Chooser, you’ll need to use a Pro Kit. (The CDN can only search and add Free icons — use shortcodes or HTML to add Pro icons when using the CDN).
Troubleshooting with the Plugin
Font Awesome icons are popular, so lots of themes and plugins also load Font Awesome, and sometimes their version can conflict with yours. So we created a way to help you find and prevent those conflicting versions from affecting your icons: The Conflict Detection Scanner.
If the plugin seems to be set up correctly and your icons still aren’t loading and you’re not sure why, head over to the Troubleshoot tab, which has two parts:
Get more information about using the scanner for troubleshooting on the Font Awesome WordPress docs.
Configuring
The plugin is set to serve Font Awesome Free icons as a Web Font via the Font Awesome CDN by default. You can change the CDN settings right in the plugin. If you want just the basic Free icons, you probably don’t need to make any changes to the default configuration.
You can get more information about all the available settings and troubleshooting on the Font Awesome WordPress docs.
Upgrading from the Old Versions
If you used the old plugin or are still using Version 3 of Font Awesome, we’ve tried to smooth the upgrade path for you by keeping [icon] shortcode compatibility for Font Awesome 3 names used with the old plugin. But we plan to remove version 3 naming support from this plugin soon so don’t wait too long to update your code!
See Also
The README on GitHub has details for WordPress site owners and developers.
And there are API docs for developers.
Скриншоты
Установка
From the Plugins Directory in WordPress Admin
From the «Add Plugins» page in WordPress admin:
Search the plugins directory by author: fontawesome
Click «Install» on the Font Awesome plugin in the search results
Installing a Zip Archive
Access Font Awesome Plugin Settings
Once you activate the Font Awesome plugin, you will see Font Awesome in the Settings menu in your WordPress admin area, or you can click «Settings» on the plugin listing on the Plugins page.
The plugin is set to serve Font Awesome Free icons as a Web Font via the Font Awesome CDN by default. You can change the CDN settings right in the plugin. If you want just the basic Free icons, you probably don’t need to make any changes to the default configuration.
Using Pro Icons and Features
To enable Pro icons with the CDN, you will need to add your domain to the list allowed domains on your Font Awesome CDN Settings page. To configure a Kit, get your API Token from your Font Awesome account page.
You can get more information about all the available settings and troubleshooting on the Font Awesome WordPress docs.
Часто задаваемые вопросы
You can get more information about using the plugin, details for available settings, and answers to frequently asked questions on the WordPress docs on Font Awesome.
Отзывы
Just works, quick and simple
updated: refunded me
Excellent Plugin. Thanks a LOT!
Unresponsive Tech Support / No Refunds Allowed
The best Font Awesome plugin
Works Sometimes
Участники и разработчики
«Font Awesome» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
«Font Awesome» переведён на 12 языков. Благодарим переводчиков за их работу.
Заинтересованы в разработке?
Журнал изменений
4.0.0-rc23
FIX: plugin now handles Kits with version «5.x» or «6.x»
FEATURE: shortcode supports attributes: style, role, title, aria-hidden,
aria-label, aria-labelledby
4.0.0-rc22
Metadata about available Font Awesome releases is now stored as a normal option
in the WordPress database, instead of as a transient. Thus, it does not expire
and does not disappear if the transient cache is purged.
This is in part to avoid the scenario where a request to the Font Awesome API
server may be required to refresh metadata in response to a front end page load
when that transient expires.
Some site owners had occassionally experienced problems where a sudden burst of
requests to the API server from many WordPress sites caused this plugin to fail
when making a request with an error like ‘An unexpected response was received
from the Font Awesome API server.’ This change means that it is significantly
less likely that such a scenario will occur.
(Additionally, changes have been made on the API server, also making it
significantly less likely that this over-load failure will occur again.)
Developers: the refresh_releases() API method has been deprecated to discourage
unnecessary blocking network requests to the API server.
4.0.0-rc21
4.0.0-rc20
4.0.0-rc19
4.0.0-rc18
4.0.0-rc17
SECURITY: fixes a vulnerability in how API tokens were being stored, when configured to use a Kit. All users of 4.0.0-rc15 or 4.0.0-rc16 should update immediately. Find more details and instructions for updating your API Token on the Font Awesome blog.
4.0.0-rc16
4.0.0-rc15
MAJOR UPDATE, some breaking changes for developers. Improves conflict detection, adds support for Kits and internationalization.
4.0.0-rc13
4.0.0-rc12
4.0.0-rc11
4.0.0-rc10
4.0.0-rc9
Enhance Font Awesome version 4 compatibility: add shimming of the version 4 font-family to enable version 4
icons defined as pseudo-elements to be rendered via the version of Font Awesome 5 loaded by this plugin.
Add warnings to the admin UI to indicate that using svg and pseudo-elements may result in slow performance,
and that svg with pseudo-elements and version 4 compatibility is not supported at all.
4.0.0-rc8
Remove dependence on third party libraries, eliminating a class of potential conflicts with other plugins.
Breaking changes to the API used by theme and plugin developers (no breaking changes for WordPress site owners).
See commit log
4.0.0-rc7
4.0.0-rc6
4.0.0-rc5
4.0.0-rc4
Cache releases data in the WordPress database to reduce the number of server-side network requests.