WordPress awesome font: Как добавить иконки Font Awesome на сайт WordPress

WP Font Awesome — Плагин для WordPress

This plugin allows you to easily embed Font Awesome icon to your website using HTML or built-in shortcode handlers.

Возможности плагина

1. Shortcode support. Example: For Font Awesome 5 [wpfa5s icon=""], [wpfa5r icon=""], [wpfab icon=""], and for Font Awesome 4.7+ [wpfa icon=""]
2. Use Larger Icon: [wpfa icon="" size="2x"]. Sizes: xs, sm, lg, 2x, 3x, 5x, 7x, 10x
3. Add Font Awesome icon in Menu with shortcode.
4. Support shortocde in Widgets.
5. Support post and page title.
6. Support Font Awesome version 4.7.0
7. Font Awesome version 5.15.1
8. Add Font Awesome icon from editor Toolbar button.

Короткий код

Introduced three new shortcode for Font Awesome support.

Font Awesome 5
[wpfa5s icon=»home»] for Solid style.
[wpfa5r icon=»user»] for Regular style. support only in few icon.
[wpfa5b icon=»facebook»] for Brands.

Font Awesome 4.7+
[wpfa icon=»»].

Note

The fa prefix has been deprecated in version 5. The new default is the fas solid style far regular style and the fab style for brands.

WP Font Awesome plugin still support Font Awesome version 4

1. Unzip the download package
2. Upload wp-font-awesome to the /wp-content/plugins/ directory
3. Активируйте плагин используя меню ‘Плагины’ в WordPress

Manual Plugin Installation

1. Download WP Font Awesome Plugin to your desktop.
2. If downloaded as a zip archive, extract the Plugin folder to your desktop.
3. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
4. Go to Plugins screen and find Content WP Font Awesome in the list.
5. Click Activate Plugin to activate it.

Применение

Font Awesome 5

• [wpfa5s icon="home"] or [wpfa5s icon="fa-home"] for Solid style.
• [wpfa5r icon="user"] or [wpfa5r icon="fa-user"] for Regular style. support only in few icon.
• [wpfa5b icon="facebook"] or [wpfa5b icon="fa-facebook"] for Brands.

Font Awesome 4.7+

Use the [wpfa icon="fa-home"] or [wpfa icon="home"] shotcode to add an icon.

Sizes
Sizes: xs, sm, lg, 2x, 3x, 5x, 7x, 10x.
Example: [wpfa5b icon="facebook" size="3x"]

Color
[wpfa ….. color=»#336699″]

Superscript
[wpfa ….. sub=»yes»]

How to use shortcode in Widget title

Font Awesome 5
[wpfa5s icon=»home»] for Solid style.
[wpfa5r icon=»user»] for Regular style. support only in few icon.
[wpfa5b icon=»facebook»] for Brands.

Font Awesome 4.7+
[wpfa icon=»»].

Note: Don’t use double quotes (" ") on shortcode in Widget title.

Works great (especially, if you know how HTML and CSS) and it is constantly updated to be compatible with the latest WordPress.

It does what it promises. 🙂

This even works with the default tags i.e. <i></i> and it loads the fontawesome icons locally, from your own server. That’s what you want because CDN’s require data processing agreements and stuff like that. This is way easier, lightweight and simple.

Edit: Hmm, doesn’t seem to work on all my sites.. o.O

Works like a charm. Enough said.

Great plugin, easy to style, top stuff

Easy to setup and use! Thanks for the plugin.

Посмотреть все 6 отзывов

«WP Font Awesome» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

1.7.6

• Updated FontAwesom to 5.15

1.7.6

1.7.5

• Add Font Awesome icon from editor Toolbar button.
• Updated FontAwesom to 5.12

1.7.4

• Updated FontAwesom to 5.4

1.7.3

• Fixed fonts loading issue

1.7.2

• Updated FontAwesom to 5.2.0

1.7.1

• Added Superscript option.

1.7

1.6

• Updated Font Awesome to 5.0.10
• Introduced 3 additional shortcode for Font Awesome 5+
• Still support Font Awesome 4

1.5

• Updated Font Awesome to 4.7.0

1.4

1.3

• Added Larger Icon option.
• Updated Font Awesome to 4.6.0

1.2

• Added font icon support in post and page title.

1.1

• Updated Font Awesome to 4.5.0
• 20 New Icons in Font Awesome 4.5

1.0

Плагин Better Font Awesome — подключаем иконочный шрифт на WordPress

В очередной раз сделаем заметку о неотъемной части сайта, а именно — об иконках на основе шрифта Font Awesome. В сети Интернета он имеет довольно большую популярностью за счет огромного набора векторных иконок и своей простотой в использовании. В одной из статей мы рассматривали пару вариантов подключения Font Awesome в ручном порядке, то есть, редактируя файлы темы. На этот раз будем применять плагин, который автоматически интегрирует шрифт в вашу текущую тему.

Плагин Better Font Awesome

Данный плагин представляет из себя автоматический инструмент в подключении иконочного шрифта самой актуальной его версии, или определенной, выбирая из списка доступных. Иконки можно добавлять в вашу тему четырьмя способами: HTML-теги с определенными классами, шорткоды, через редактор и последнее – псевдоэлементы CSS.

Некоторые особенности:

• Подключение шрифта через CDN (Сеть доставки)
• Всегда подключает актуальную на данный момент версию шрифта
• Совместимость с похожими плагинами. Это на случай, если вместо другого подобного модуля установите этот.

Better Font Awesome

Как пользоваться плагином Better Font Awesome

Как только установите плагин и активируйте его, то во вкладке «Настройки» добавится новый раздел «Better Font Awesome». На этой странице будет всего лишь 4 пункта параметров: выбор версии или всегда актуальную, подключение сокращенного файла стилей (.min.css) или нет, попытка удалить существующее подключение шрифта (если изначально такое имеется в вашей теме) и оповещение при возникновении ошибок. Все можно оставить по умолчанию.

И чуток ниже параметров есть примеры иконок с тегом <i> и шорткодами, а также ссылка на более развернутые примеры. Как использовать иконки через псевдоэлемент, читайте выше по ссылке.

А также в разделе добавления статьи сверху редактора появится новая кнопка «insert icon», по нажатию на которую откроется меню со всеми иконками и строкой поиска. Таким путем можно очень легко вставлять иконки прямо в текст статьи.

Параметры иконок

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

Стилизация

К примеру, вы через редактор добавляете иконку в виде шорткода. Он будет выглядеть вот так:

[icon name="cogs" unprefixed_class=""]

Для стилизации именно этой иконки нужно добавить к ней свой класс и к этому классу автоматом добавится префикс fa-. Вот так будет выглядеть код с классом:

[icon name="cogs" unprefixed_class=""]

А в исходном коде, если посмотреть что вышло, то будет такой код:

<i></i>

Стало быть, стили прописываем таким образом:

i.fa-wsmall {
    color: #34aed1;
    border: 1px solid #34aed1;
    padding: 10px;
    border-radius: 5px;
}

Размер иконки

Благодаря определенным классам у нас есть возможность манипулировать иконками, при этом не прописывать никаких своих стилей. Размер иконки можно задать с помощью класса fa-2x до fa-5x.

[icon name="cogs" unprefixed_class=""]

Анимация

В комплекте присутствует круговая анимация двух скоростей: fa-pulse – вращение восьми шагами, fa-spin – плавная. И, конечно, можно анимировать иконки, используя любую другую анимацию.

[icon name="cogs" unprefixed_class=""]

Больше примеров найдете по ссылке внутри плагина.

В Font Awesome появились новые иконки, связанные с COVID-19

В понедельник команда Font Awesome выпустила новый набор иконок, направленный на увеличение осведомленности о COVID-19. Иконки в начертании solid доступны в обновлении Font Awesome 5.13 – все они бесплатные и имеют открытый код. В pro-пакет входят те же самые иконки, только в версиях regular, light и duotone.

Цель новых иконок – помочь владельцам сайтов и приложений увеличить осведомленность пользователей о глобальной пандемии. В последнем обновлении было добавлено 47 новых иконок, которые связаны с медициной и гигиеническими практиками. Некоторые иконки изображают вирусы и социальную/физическую дистанцию. Есть даже пара иконок с туалетной бумагой. Все это является необходимым в современном мире массовой паники.

«Основываясь на рекомендациях ВОЗ и других организаций, мы ввели иконки, которые изображают правильную гигиену и социальную дистанцию», – рассказал Джори Рафаэль из Font Awesome. – «Мы не находимся на фронте борьбы, как это делают храбрые медицинские работники по всему миру, но мы надеемся, что эти иконки помогут донести до людей те базовые принципы, которые позволят защитить себя и свое окружение».

Иконки изначально были запрошены в GitHub-репозитории Font Awesome еще две недели назад. Команда разработчиков быстро их выкатила. Также имеются дополнительные тикеты на жидкое мыло и кусок мыла.

Как и в случае с остальными иконками Font Awesome, новые изображения доступны в виде пакета шрифтов. Также их можно скачивать в виде отдельных SVG-файлов.

Шрифты пригодятся владельцам веб-сайтов, дизайнерами и разработчикам, которые создают ресурсы, посвященные COVID-19. С помощью иконок можно добавить нужный контекст или привлечь внимание к контенту, где это необходимо.

Пользователи плагина Font Awesome смогут получить прямой доступ ко всем новым иконкам. Плагин использует внешнюю сеть Font Awesome CDN или набор Font Awesome. Пользователи также могут выбрать, какую версию библиотеки иконок они хотят использовать, включая и последний релиз.

Источник: wptavern.com

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

Эта статья была первоначально опубликована в феврале 2015 года и была обновлена ​​в 2018 году для корректировки версии, а также других незначительных правок и дополнений.

Веб-иконки

Пользователи, посещающие веб-сайт, уделяют столько же внимания визуальному дизайну веб-сайта, сколько и содержанию, которое они надеются найти там.

Традиционно дизайнеры и разработчики использовали отдельные изображения / спрайт-листы для своих иконок; Эти графические изображения представляли собой серию изображений, идеально подходящих по пикселям, которые будут использоваться в определенных частях сайта (таких как панель поиска, навигационные элементы, значки загрузки и т. д.).

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

Что такое иконки шрифтов?

Значки шрифтов — это способ отображения полностью адаптивных настраиваемых значков на нашем веб-сайте без использования дополнительных изображений или спрайт-листов.

Иконки шрифта — это то, на что они похожи, шрифт, состоящий полностью из иконок.

Там, где обычный шрифт определяет символы, такие как «a», «b», «c», шрифт значка определяет символы, которые являются символами, такими как символ поиска, символ переключения меню и целая куча других — все в одном шрифт.

Зачем мне использовать иконки шрифтов?

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

Иконки шрифта полностью отзывчивы

• Эти значки являются векторами и могут быть масштабированы до любого размера без потери качества.
• Традиционные изображения — это растровые изображения, которые создаются с заданным размером / размером (обычно на основе сетки, такой как 48 × 48). Эти изображения могут выглядеть ужасно при изменении размера или при просмотре на устройстве с высоким разрешением.

Иконки шрифта можно стилизовать, позиционировать и манипулировать

• Значками шрифтов можно управлять, как если бы они были типичными шрифтами; Вы можете установить их цвет, цвет фона, выравнивание текста, высоту строки и другие атрибуты, чтобы стилизовать их с помощью CSS.
• Традиционные изображения не дают вам точного контроля. Если вы хотите, чтобы изображение немного отличалось по цвету или размеру, вам нужно загрузить другое изображение.

Иконки шрифтов кроссбраузерны и доступны в изобилии

• Значки шрифтов имеют глубокую совместимость вплоть до древних браузеров (я смотрю на вас, IE6)
• Есть десятки отличных иконок-шрифтов, на которые дизайнеры потратили бесчисленные часы; Эти шрифты, как правило, часто обновляются и уточняются, чтобы обеспечить лучший опыт.

Вот случайный пример шрифта иконки; изображения не требуются.

Со всеми замечательными бесплатными шрифтами значков, существует очень мало причин использовать традиционные изображения для значков больше. Тем не менее, есть некоторые спорные недостатки шрифтов значков.

• Различия между браузером и ОС. Поскольку это шрифты, браузер отображает значки (есть тонкие различия между каждой ОС, между браузерами и даже между разными версиями одного и того же браузера). Традиционные изображения, однако, выглядят одинаково, независимо от того, на что они смотрятся.
• Не каждый значок существует — дизайнеры покрыли большинство значков, которые вам понадобятся в ваших проектах; однако не все мыслимые значки были созданы, поэтому в некоторых ситуациях вам может потребоваться полагаться на изображения.

Внедрение Font Awesome в ваш проект WordPress

Font Awesome включен в тысячи проектов в Интернете, включая темы WordPress (например, собственную базовую тему SitePoint) и плагины. Интеграция Font Awesome с WordPress, будь то тема или плагин, исключительно проста и требует всего несколько шагов, чтобы начать работу.

Можно использовать десятки шрифтов значков, но в этом уроке я буду использовать Font Awesome, так как они содержат сотни действительно удивительных значков. Мы будем использовать версию 5.4 Font Awesome.

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

Есть два основных варианта получения Font Awesome в вашем проекте; Вы можете загрузить файлы на свой веб-сервер или просто создать ссылку на внешнюю таблицу стилей в CDN.

Скачайте Font Awesome и включите шрифты / CSS вручную

Нажмите на ссылку для скачивания на домашней странице Font Awesome и получите zip-файл. Внутри zip-файла вы увидите шрифты и необходимый CSS-файл (есть также файлы LESS / Sass, но мы не собираемся их использовать).

В вашем zip-файле должны быть следующие ресурсы, которые вам понадобятся для переноса в ваш проект (переместите их в свои соответствующие каталоги через FTP). Создайте каталог в своей теме или плагине под названием «шрифты», а другой — «css» и переместите файлы в эти каталоги.

Перейдите в файл functions.php Создайте функцию и присоедините ее к действию wp_enqueue_scripts Если у вас есть эта функция, вызовите функцию wp_enqueue_style

 
function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Ссылка на размещенный CDN

Хостинг со сторонним CDN значительно облегчает этот процесс; все, что вам нужно сделать, это создать функцию в вашем файле functions.phpwp_enqueue_scripts Внутри этой функции вы просто поставите таблицу стилей в очередь (за исключением этого времени вы будете ссылаться на внешнюю ссылку):

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

Как использовать Font Awesome (и Icon Fonts в целом)

Font Awesome можно использовать двумя разными способами. То, как вы реализуете это, полностью зависит от вас и потребностей вашего проекта.

Псевдоэлемент (метод CSS)

Использование псевдо-метода для добавления вашего значка включает использование псевдо-селекторов CSS :before:after

Что вы делаете, это определяете элемент, к которому хотите применить свой значок, и создаете стиль CSS до или после элемента и вручную устанавливаете значок, который будет использоваться (вместе с его стилем и дизайном).

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

Основными свойствами, которые необходимо установить, являются contentfont-family

Пример кнопки

 
<style>

.my-button{
	display: inline-block;
	padding: 8px 12px;
	background: #eee;
	border: solid 1px #D5D5D5;
}
.my-button span{
	display: inline-block;
}
.my-button span:before{
	font-family: 'FontAwesome';
	content: '\f085';
	position: relative;
	margin-right: 5px;
	font-size: 110%;
}

</style>


<div>
	<span> Settings Menu </span>
</div>

Вот пример вывода:

Так как мы хотели отобразить иконку с несколькими передачами, мы использовали Unicode для этой иконки. На каждой странице Font Awesome будет показана ссылка на Unicode, которую нужно включить; В этом примере Unicode — это \f085странице примера .

Псевдоэлемент Плюсы

• Вы можете быть очень конкретными со своими проектами; Вы устанавливаете размеры, высоту линии, цвета и стили, которые вам нужны
• Вам не нужно использовать дополнительный элемент HTML просто для создания иконки (вы можете применить это непосредственно к другому элементу, например, h2 или div, а затем расположить его вокруг элемента)

Cons

• Нужно настроить все вручную (вы не можете просто использовать предопределенный класс Font Awesome, чтобы сделать все больше или повернуть, или другие изменения)
• Сложно целиться с помощью JavaScript / jQuery (так как вы используете метод CSS для элемента, если вы хотите нацелиться на элемент и изменить иконку / своп, это сделать невозможно; это потому, что вы не можете нацеливать псевдоэлементы)
• Если Font Awesome обновляет их ссылки на Unicode и вы обновляете таблицу стилей, вам может потребоваться повторно ввести значения Unicode)

Встроенный элемент (метод HTML)

Самый простой способ использовать Font Awesome — это присвоить классы Font Awesome элементу.

Когда вы используете иконку шрифта таким образом, он генерирует псевдоэлемент до / после целевого элемента и создает стиль для иконки.

Если вы хотите отобразить значок, вам нужно назначить класс faispan Этот класс соединяет ваш элемент со шрифтом Font Awesome.

Как только ваш элемент имеет базовый класс fa Например, если вы хотите отобразить значок камеры, вы также добавите класс fa-camera-retro Выбор этого соответствующего класса значков приведет к поиску шрифта значка и отображению его символа юникода (его глифа).

 
<i></i>

Что бы сделать что-то вроде этого:

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

Вы можете создать простое навигационное меню, используя предопределенные классы и стили Font Awesome:

 <!-- CSS for the menu -->

.nav-list .nav-item{
	display: block;
}
.nav-item .nav-link:first-child{
	border-top: solid 1px #ccc;
}
.nav-item .nav-link{
	display: block;
	padding: 8px 12px;
	background: #eee;
	border: solid 1px #ccc;
	border-top: 0px;
	color: #333;
}
.nav-link > i {
	margin-right: 10px;
}

 
<nav>
	<div>
		<li>
			<a href="/">
				<i></i>
				<span>Homepage</span>
			</a>
			<a href="/users">
				<i></i>
				<span>Our Users</span>
			</a>
			<a href="/tags">
				<i></i>
				<span>View Tags</span>
			</a>
		</li>
	</ul>
</nav>

Это создаст простое вертикальное меню навигации, как показано ниже:

Пример Stacking Icons

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

 <!--Basic CSS styling -->
.social-bar {
	text-align: center;
}
.social-bar .header{
	display: inline-block;
	margin: 0px 7px 0px 0px;
	border-bottom: solid 1px;
	font-size: 110%;
}

.social-bar .icon{
	display: inline-block;
}

.social-bar .icon > .back{
	background: #333;
}

.social-bar .icon > .front{
	color: #fff;
}

 
<div>
	<p>Join our social media </p>
	<a href="https://www.facebook.com/">
		<span>
			<i></i>
			<i></i>
		</span>
	</a>
	<a href="https://twitter.com/">
		<span>
			<i></i>
			<i></i>
		</span>
	</a>
	<a href="https://www.pinterest.com/">
		<span>
			<i></i>
			<i></i>
		</span>
	<a>
</div>

Вы должны увидеть серию значков социальных сетей, которые выглядят так:

Сложенные значки работают, оборачивая ваши значки вокруг другого элемента и применяя к нему класс fa-stack

Значки, которые вы хотите использовать в стеке, также должны использовать класс fa-stack Вы можете указать необходимый размер, используя классы размеров, такие как fa-stack-1xfa-stack-2x

Инлайн Элемент Плюсы

• Очень прост в использовании. Примените классы Font Awesome, которые вы хотите, и тогда вы увидите свою иконку
• Вы можете настроить таргетинг на сам элемент с помощью JavaScript / jQuery, то есть вы можете добавить классы или удалить классы, чтобы изменить и изменить отображаемый значок.
• Множество различных стилей и действий на выбор, включая сложенные значки, анимацию, изменение размера и позиционирование. Все они были протестированы, чтобы убедиться, что они работают хорошо и являются кросс-браузерными жалобами (у вас нет головной боли при тестировании всего этого самостоятельно)
• Простое визуальное представление в HTML, чтобы показать, что вы используете значок (псевдоэлементы могут быть пропущены, если они только определены в CSS)

Cons

• Если вам требуется более точное управление, вам нужно применить дополнительные стили / переопределить классы Font Awesome

Вывод

Теперь, когда вы знаете основы получения шрифтов значков для работы в вашем проекте, вы можете расширить свои дизайны и, надеюсь, удалить старые значки на основе изображений / спрайтов в пользу этих новых полностью адаптивных методов!

Как добавить шрифты FontAwesome в WordPress без какого-либо плагина? • Crunchify

Последнее обновление 7 августа 2021 г. от App Shah 4 комментария

На Crunchify мы всегда стремимся улучшить скорость загрузки страниц, и, как вы, возможно, видели в моем последнем посте, мы удалили загрузку 9 высоко загружаемых ресурсов на сайте.

Одна из причин, по которой мы смогли это сделать, — использовать шрифты FontAwesome на Crunchify.

Все значки социальных сетей на боковой панели, стрелка вниз в заголовке , мета-значки сообщений (, ), кнопки публикации в социальных сетях внизу каждой страницы и т. Д. — все это отличные шрифты.

Мне не нужно загружать эти значки .png или .jpg отдельно. Добавить шрифты font-awesome.io на любой сайт WordPress очень просто, и мы хотели бы рассказать, как это сделать.

• Как легко добавить иконочные шрифты в вашу тему WordPress
• Использование Font Awesome в вашей теме WordPress
• установить и интегрировать font awesome в wordpress

Давайте приступим:

Шаг-1

Загрузите отличные шрифты с домашней страницы.

• Ссылка: https://fontawesome.com/start
• Прокрутите вниз до раздела: Другие способы использования
• Нажмите кнопку «Загрузить»
• Прямая ссылка для загрузки: https://fontawesome.com/how-to- используйте / on-the-web / setup / hosting-font-awesome -self

Step-2

Распакуйте его на локальный диск и с помощью FTP поместите в папку в папке / wp-content / icon .

В моем случае это полный URL : https: // use.fontawesome.com/releases/v5.14.0/css/all.css?ver=5.7

Шаг-3

Перейдите в свою тему WordPress и поставьте в очередь CSS с потрясающим шрифтом. Просто добавьте приведенный ниже код в файл functions.php вашей темы.

Убедитесь, что теперь CSS правильно загружается на ваш сайт.

Вот и все. У вас все настроено.

Шаг-4

Теперь, как добавить социальные сети и другие значки в вашу тему WordPress? Возьмем, к примеру, кнопку подписки в социальных сетях.

Поместите этот код в виджет боковой панели:

Вставьте этот код в стиль вашей темы WordPress.css файл:

Вы увидите красивую кнопку Social Follow на своем сайте.

Вот живой пример:

Еще несколько образцов:

1.Недурно:

2. Сердце:

У вас будет возможность выбрать любые значки из ~ 630 шрифтов, доступных . Сообщите мне, если у вас возникнут проблемы.

Если вы используете MaxCDN, включите Разрешить совместное использование ресурсов между источниками ошибка.

Присоединяйтесь к обсуждению

Если вам понравилась эта статья, поделитесь ею в социальных сетях. Остались вопросы по статье, оставьте нам комментарий.

rachelbaker / Font-Awesome-WordPress-Plugin: Font Awesome (http://fontawesome.io) Иконки для использования в WordPress.

Авторы: rachelbaker, BFTrick, Taylor4484, tommarshall, rscarvalho, @jeezysevenrwd

Теги: значки, потрясающий шрифт, значок шрифта, пользовательский интерфейс, значок шрифта, бутстрап
Требуется минимум: 3.0
Проверено до: 4.7.0
Стабильный тег: 4.7
Лицензия: GPLv3 или новее
URI лицензии: http://www.gnu.org/licenses/gpl-3.0.html

Позволяет легко использовать набор шрифтов Font Awesome из WordPress.Иконки можно вставлять с помощью HTML, шорткода или встроенного плагина TinyMCE.

Описание

Font Awesome — набор пиктографических шрифтов из 675 иконок. Значки бесконечно масштабируемы и совместимы с программами чтения с экрана.

Полный список из 675 иконок Font Awesome доступен: FontAwesomeIconsCheatsheet.pdf

Чтобы использовать любой из значков Font Awesome на своем сайте WordPress, у вас есть три варианта:

HTML

Применяются все примеры кода на сайте Font Awesome: http: // fontawesome.io / examples /

Примеры

Значок карандаша

Значок телефона

Шеврон левый значок

Короткий код

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

Используемый шорткод — [icon name = name-of-icon] , где name = X — это класс значка, который вы хотите использовать.

Примеры

Значок карандаша

[название значка = значок-карандаш]

Значок телефона

[icon name = icon-phone]

Шеврон левый значок

[icon name = icon-chevron-left]

Подключаемый модуль TinyMCE

Выберите значок, который вы хотите добавить к содержимому публикации или страницы, в раскрывающемся меню «Глифы» в визуальном редакторе.

Участники приветствуют

Автор

Установка

1. Загрузите Font Awesome Icons в каталог / wp-content / plugins / .

2. Активируйте плагин через меню «Плагины» в WordPress.

3. Используйте один из трех методов использования (HTML, Shortcode или TinyMCE plugin) в содержимом ваших сообщений или страниц.

4. Используйте методы HTML или Shortcode внутри текстовых виджетов.

Скриншоты

1. Примеры HTML-кода
2. Образцы шорткода
3. Плагин TinyMCE
4. Полный список значков

История изменений

=== 30 декабря 2016 г. ===

• Обновлены файлы шрифтов и CSS до Font Awesome 4.Релиз 7.0.

=== 1 июня 2016 г. ===

• Обновлены файлы шрифтов и CSS до версии Font Awesome 4.6.3.

=== 12 апреля 2016 г. ===

= 4,6 =

• Обновлены файлы шрифтов и CSS до версии Font Awesome 4.6.1. (Спасибо @jeezysevenrwd)

= 4,5 =

• Обновлены файлы шрифтов и CSS до версии Font Awesome 4.5.0. (Спасибо @jeezysevenrwd)

= 3.2.1 =

• Обновлены файлы шрифтов и CSS до Font Awesome 3.Релиз 2.1. (Спасибо @tommarshall)
• Обновлен файл build / icons.yml для справки. (Спасибо @tommarshall)
• Обновлен справочный PDF-файл со значками Font Awesome 3.2.1. (Спасибо @tommarshall)
• Добавлен плагин редактора TinyMCE, позволяющий пользователю выбирать отличные глифы шрифта из раскрывающегося списка в редакторе содержимого. (Спасибо @rscarvalho)
• Добавлена ​​константа номера версии для кеширования ресурсов бюста для будущих обновлений плагина. (Спасибо @rscarvalho)

= 3.1 =

• Обновлены файлы шрифтов и CSS до версии Font Awesome 3.1. (Спасибо @ Taylor4484)
• Обновлены ссылочные URL-адреса на новый URL-адрес Font Awesome. (Спасибо @ Taylor4484)
• Добавлен файл build / icons.yml для справки. (Спасибо @BFTrick)
• Обновлен справочный PDF-файл со значками Font Awesome 3.1.

= 3,0 =

• Обновлены файлы шрифтов и CSS до версии Font Awesome 3.0.

= 1,2 =

= 1,1 =

• Создан и активирован шорткод

= 1.0 =

Добавление иконочных шрифтов в WordPress с помощью улучшенного шрифта Awesome

Людей привлекают визуальные аспекты веб-сайта WordPress точно так же, как их привлекает письменный контент, которым вы делитесь. Фактически, по словам интернет-маркетолога Джеффа Булласа, статьи с изображениями получают на 94% больше просмотров, чем статьи без изображений.

Это огромный рост просмотров страниц, если вы спросите меня.

А для чего именно?

Просто добавьте несколько высококачественных изображений, подходящих для статьи, в ваш контент.

Но как насчет изображений на вашем веб-сайте, которые выходят за рамки снимков экрана и стоковых фотографий? А как насчет изображений, которые не только привлекают внимание, но и выполняют полезную функцию?

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

Поскольку идея, пойманная на том сайте, посетителей не только привлекали изображения на веб-сайтах, но и они были склонны взаимодействовать с ними, люди повсюду начали добавлять их на свои веб-сайты.

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

Но выход есть: иконочные шрифты.

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

Итак, приступим.

Что такое графические шрифты и зачем их использовать?

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

Иконочные шрифты — это изображения, которые часто побуждают к действию, но на самом деле они не являются изображениями.
Шрифты

Icons используются для отображения часто используемых символов на вашем веб-сайте. Например, кнопки социальных сетей, ваша корзина покупок, кнопки загрузки и кнопки навигации — все это примеры значков, которые отображаются на вашем веб-сайте в виде крошечных интерактивных изображений.

Иконочные шрифты можно использовать для выражения множества различных идей.

Зачем использовать иконочные шрифты?

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

Вот несколько веских причин, по которым иконочные шрифты являются лучшим выбором:

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

Установка значков шрифтов на ваш сайт с помощью Better Font Awesome

Better Font Awesome — это бесплатный плагин WordPress, который позволяет автоматически интегрировать последнюю версию Font Awesome в ваш проект WordPress.Кроме того, он поставляется с сопутствующим CSS, шорткодами и генератором шорткодов значков TinyMCE.

Этот плагин может похвастаться множеством полезных функций для владельцев веб-сайтов:

• Регулярные обновления последней версии
• Возможность переключения между версиями Font Awesome без изменения шорткодов
• Поддержка других популярных плагинов шрифтов, включая их шорткоды
• Тянет из сверхбыстрого jsDelivr CDN

Шаг 1. Установка и активация Better Font Awesome

Для начала установите и активируйте плагин Better Font Awesome через панель управления WordPress, как и любой другой плагин.

Сначала перейдите к Plugins > Add New и выполните поиск «Better Font Awesome».

Найдите Better Font Awesome для установки на свой сайт.

Затем выберите Установить сейчас и затем нажмите Активировать .

После активации плагин добавляет ссылку «Better Font Awesome» в меню настроек на панели инструментов WordPress.

Обратите внимание на новый пункт меню Better Font Awesome.

Шаг 2. Настройте параметры подключаемого модуля

Чтобы настроить плагин Better Font Awesome, начните с нажатия на пункт меню Better Font Awesome в разделе Settings .Как только вы это сделаете, вы увидите экран, похожий на этот:

Настройте параметры плагина.

Здесь можно сделать следующее:

• Версия: Выберите, какую версию Better Font Awesome вы хотите использовать.
• Использовать минимизированный CSS: Установите этот флажок, если вы хотите использовать минимизированную версию CSS.
• Удалить существующий Font Awesome: Установите этот флажок, чтобы попытаться удалить Font Awesome CSS и короткие коды, добавленные другими плагинами и темами.
• Скрыть уведомления администратора: Скрыть все предупреждения администратора по умолчанию, которые отображаются при возникновении ошибок API и CDN.

В дополнение к минимальному количеству параметров настройки Better Font Awesome, есть небольшой раздел Использование , в котором рассказывается, как вы можете добавлять значки на свой веб-сайт.

Узнайте, как добавить шрифты-иконки прямо на ваш сайт.

Шаг 3. Добавление значков на ваш веб-сайт

Есть три простых способа добавить значки на свой веб-сайт с помощью Better Font Awesome — с помощью шорткода, HTML или TinyMCE.

№1. Добавление значков с помощью шорткодов

Чтобы добавить значки на свой веб-сайт с помощью шорткода, сначала перейдите на веб-сайт Font Awesome, чтобы увидеть полный список доступных значков, которые можно использовать.

Здесь вы можете найти любой значок, который хотите. Например, если вам нужен значок «электронная почта», просто выполните поиск по этому ключевому слову и выберите значок, который вы хотите использовать, щелкнув по нему.

Найдите нужный значок на веб-сайте Font Awesome.

После нажатия на значок, который вы хотите добавить, вы увидите экран с изображением значка, его различными размерами и небольшим блоком кода:

Обратите внимание на название значка, различные размеры и шорткод.

Просто скопируйте блок кода и вставьте его в любое место на своем веб-сайте, используя вкладку Текстовый редактор . Вот как это будет выглядеть на бэкэнде вашего сайта:

Вставьте свой шорткод в текстовый редактор.

В конце концов, вот что увидят посетители сайта, когда перейдут на ваш сайт:

В интерфейсе вашего веб-сайта будет отображаться значок.

№ 2. Добавление значков с помощью HTML

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

Вот почему они рекомендуют вместо этого использовать шорткоды. Однако, если вы хотите использовать HTML, в Font Awesome есть некоторая полезная информация.

№ 3. Добавление значков с помощью TinyMCE

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

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

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

Если вы хотите узнать, как настроить значки своего сайта, обратитесь к примерам Font Awesome.

Дополнительные параметры значка шрифта

Использование Better Font Awesome — не единственный способ добавить шрифты значков на ваш сайт. И, как и обещал, я поделюсь с вами некоторыми из лучших альтернатив.

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

• Фонтелло . Преобразуйте бесплатные пользовательские векторные изображения в веб-шрифты для использования на своем веб-сайте, которые станут понятными, масштабируемыми и совместимыми с несколькими браузерами. Кроме того, настройте с помощью CSS, чтобы изменить цвета, размеры, тени и многое другое.
• Современные пиктограммы . Используйте любое количество из их более чем 260 рисунков объектов и значков для нескольких интерфейсов, таких как ваш веб-сайт WordPress. Эта услуга премиум-класса позволяет совершать отдельные покупки в формате SVG.
• Icomoon . Этот онлайн-сервис позволяет создавать четкие, точные до пикселя шрифты для иконок. Кроме того, вы можете использовать эксклюзивный конструктор шрифтов значков, чтобы преобразовать значки изображений в шрифты значков. Благодаря 5000 бесплатных значков с открытым исходным кодом и более 4000 значков премиум-класса, размещенным в специальных пакетах значков, здесь нет недостатка в изображениях, которые можно выбрать.

Далее давайте рассмотрим некоторые дополнительные плагины шрифтов, которые можно использовать на вашем веб-сайте WordPress.

• WP SVG Icons — это плагин для значков WordPress, который включает более 490 значков. Кроме того, вы можете создавать и загружать до 10 собственных значков с помощью эксклюзивного средства импорта шрифтов Icomoon Icon Pack.

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

• Genericon’d включает 3 набора значков — Genericons Neue, Social Logos и Genericons — которые можно разместить в темах или функциях вашего веб-сайта с помощью базового HTML или ваших сообщений и виджетов с помощью коротких кодов.

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

• Icon List — мощный, но простой плагин, предоставляющий владельцам веб-сайтов виджет для использования в стандартных списках на вашем веб-сайте. Отображайте контактную информацию своей компании и платформы социальных сетей с соответствующими значками, чтобы посетители сайта могли быть в курсе вашего бизнеса.

• Smart Icons для WordPress предоставляет вам 519 значков Font Awesome, которые можно использовать в сообщениях, страницах и пользовательских типах сообщений простым нажатием кнопки. Он поставляется с простым в использовании интерфейсом, пользовательскими короткими кодами или короткими кодами по умолчанию и даже с возможностью загрузки шрифтов из CDN.

  Кроме того, Smart Icons поддерживает отображение 4K, работает с любым API редактора и даже поддерживает эффекты CSS, такие как изменение радиуса и тени для дополнительной настройки.

Последние мысли

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

Иконочные шрифты

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

Использование плагина, такого как Better Font Awesome, — один из самых простых способов добавить шрифты для значков на ваш сайт. Это связано с тем, что плагин шрифтов практически не требует настройки и обычно выполняет большую часть работы за вас, поэтому вам не придется иметь дело с обширным HTML-кодом.

Если вы хотите увеличить просмотры страниц своего веб-сайта, улучшить взаимодействие с контентом и предоставить посетителям сайта привлекательный веб-сайт, который четко сообщает, что вы от них хотите, рассмотрите возможность добавления шрифтов значков на свой веб-сайт с помощью Better Font Awesome или любого другого варианта. Я поделился с вами.

Теги:

Как использовать значки Font Awesome на своем сайте WordPress (2021 г.)

Последнее обновление 7 сентября 2021 г.

Font Awesome — одна из самых популярных библиотек значков и наборов инструментов. Вы можете рассчитывать на то, что он предоставит вам высококачественные значки и графику Retina для вашего веб-сайта.

Благодаря тому, что WordPress Gutenberg помогает пользователям создавать красивый и функциональный веб-дизайн намного проще, спрос на столь же потрясающие значки как никогда высок.

К счастью для вас, мы обсудим, как легко интегрировать Font Awesome с WordPress.Таким образом, вы можете указать его минусы в любом сообщении или на странице вашего сайта, используя блоки Гутенберга.

Помимо преимуществ использования Font Awesome на вашем сайте WordPress, мы также упомянем некоторые потенциальные проблемы, с которыми вы можете столкнуться с ним.

Настройка Font Awesome на WordPress

Есть разные способы настройки Font Awesome на WordPress. Ваш выбор будет зависеть от того, что лучше всего соответствует вашим потребностям.

Тем не менее, ниже приведены способы интеграции Font Awesome в WordPress.

1. Настройка вручную путем копирования и вставки кода набора

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

После дальнейшей настройки учетной записи вы должны увидеть свой код комплекта на панели управления.

Но перед тем, как нажать кнопку «Копировать код набора», вы можете обслуживать значки намного быстрее и эффективнее.

Перейдите на страницу настроек и установите переключатель Pro для значков и SVG для технологий.

Вы не только получаете доступ к значкам премиум-класса, но также включаете автоматическое разбиение на подмножества. Что он делает, так это загружает значки, которые вы используете только для своих проектов, тем самым уменьшая количество запросов API и повышая скорость загрузки.

Что касается преобразования значков в файлы SVG вместо веб-интерфейса, у вас есть доступ, помимо прочего, для настройки внешнего вида значков. Однако не все браузеры распознают SVG и правильно отображают значки. Помните об этом, выбирая между ними.

Если вы уже используете плагин, который позволяет встраивать код в раздел заголовка, например плагин Insert Headers and Footers от WPBeginner, вы можете скопировать и вставить код набора в раздел заголовка.

Сохраните изменения, чтобы включить Font Awesome на своем сайте.

2. Используйте официальный плагин Font Awesome

Существует множество плагинов WordPress, которые помогут вам размещать иконки Font Awesome на вашем сайте. Один из многих плагинов, который вы можете использовать, является официальным от самого Font Awesome.

После установки и активации плагина вы можете настроить его на свои желаемые параметры.

У вас есть возможность загрузить значки из кода набора (аналогично настройке выше) или из CDN. Последний не требует создания учетной записи для доступа к коду набора. Однако первый из них обслуживает значки на вашем сайте намного быстрее и эффективнее.

3. Ссылка на внешние значки Font Awesome

Чтобы иметь полный контроль над тем, как управлять значками Font Awesome на своем веб-сайте, лучше всего разместить их на своем сервере.

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

Тем не менее, этот метод лучше всего подходит, если у вас есть навыки веб-разработки. Если вы не умеете кодировать, вам лучше использовать процессы, упомянутые выше.

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

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

После того, как вы правильно настроили значки Font Awesome, теперь вы готовы разместить их на любых своих записях и страницах WordPress.

Для начала вам нужно знать, какой из них вы хотите использовать из галереи.

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

Выбрав значок, нажмите кнопку «Начать использовать этот значок» и скопируйте HTML-код.

В редакторе Гутенберга используйте блок HTML в разделе «Форматирование» и вставьте туда код.

Если вы все сделаете правильно, вы должны увидеть значок на странице предварительного просмотра.

Что делает Font Awesome отличным набором значков, так это возможность настраивать и редактировать внешний вид значков.

Например, добавление «fa-5x» в код приводит к увеличению значка в пять раз по сравнению с его обычным размером.

Изучая различные команды для настройки своего Font Awesome, вы можете создавать более интересный веб-дизайн и контент. для посетителей вашего сайта.

Вы можете просмотреть больше команд, проверив эту страницу.

Делаем вещи намного проще с помощью Stackable

Выше мы объяснили стандартные способы доступа пользователей WordPress к Font Awesome.

Хотя процесс прост и понятен, настроить значки сложно, особенно если вы не знакомы с кодом. Достаточно сказать, что он не удобен ни для новичков, ни для пользователя.

Чтобы упростить использование Font Awesome, лучший способ продолжить — установить Stackable, наш плагин для блоков Gutenberg.

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

После активации нашего плагина используйте блок значков для доступа к нужным значкам Font Awesome на странице. Лучше всего то, что вы можете настроить их, используя параметры стиля на правой боковой панели.

Это кардинально меняет правила игры, потому что вам больше не нужно искать код значка, копировать и вставлять его в блок HTML и стилизовать его вручную. С помощью Stackable вы можете добавлять значки и редактировать их, как профессиональный дизайнер, даже без опыта!

Кроме того, у вас могут быть значки, которые вы хотите использовать, но они недоступны в Font Awesome. К счастью, вы можете загружать их как файлы SVG и редактировать их так же, как и другие значки, доступные в библиотеке.

Если у вас есть учетная запись Font Awesome Pro, вам поможет Stackable Premium.В Stackable Premium вы можете скопировать код набора и вставить его в раздел библиотеки значков, чтобы включить значки Font Awesome Pro на своем сайте.

После этого все ваши значки Font Awesome Pro станут доступны именно так.

Заключение

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

И это становится еще лучше, если вы используете Stackable вместе со значками.Готовые макеты плагина позволяют создавать красивые страницы всего за несколько щелчков мышью — никакого опыта в дизайне не требуется!

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

Если у вас есть учетная запись Font Awesome Pro, Stackable Premium позволяет вам вставить код набора в свои настройки, чтобы вы могли получить доступ ко всем значкам прямо из блока значков.

Лучше всего то, что вы можете редактировать внешний вид значков по своему вкусу без каких-либо знаний в области программирования. Это доступно для бесплатного и профессионального плана.

Итак, если вы хотите получить доступ к значкам Font Awesome и создавать красивые страницы WordPress с помощью Gutenberg, загрузите Stackable, нажав здесь.

Дополнительная литература:

Font Awesome Руководство по использованию WordPress

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

Font Awesome WordPress Usage

Шрифт Awesome WordPress Usage

Иконки когда-то были главной проблемой при создании веб-сайта. Редко можно было найти подходящие, особенно если вам нужно было больше пары, чтобы они были в одном стиле.(Десять значков с одинаковым дизайном? Забудьте об этом!) И даже если вы, , нашли их каким-то образом , качество было не на должном уровне, если вы хотели использовать значки разных размеров. Короче говоря, чтобы получить правильные значки, вам нужно было создать их самостоятельно.

Со временем ситуация немного улучшилась, и тут и там стали появляться различные пакеты значков (торговые площадки, небольшие сайты). Но это все еще было не совсем идеально. Даже с этими сайтами вам все равно приходилось искать значки самостоятельно, вместо того, чтобы иметь какую-то легкодоступную библиотеку.Здесь в игру вступает Font Awesome и на чем основано наше руководство по использованию WordPress.

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

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

И это можно сделать с помощью любого значка Font Awesome.

Следовательно вопрос:

Это хорошо?

На мой взгляд, основными сильными сторонами Font Awesome являются:

• Библиотека действительно большая, на данный момент насчитывает более 630 иконок
• Каждый значок легко доступен после интеграции вашего сайта с основной библиотекой
• — это все векторы, поэтому вы можете делать все, что хотите, с отображением значков.
• очень легко добавить значок где угодно.

Откровенно говоря, Font Awesome отлично справляется со своей задачей. В довершение ко всему, здесь не так уж много времени на обучение. После того, как вы установили Font Awesome на свой сайт, все, что вам нужно сделать, это:

Визуальное качество самих иконок тоже очень высокое. Распространенная проблема со многими пакетами значков, доступными в Интернете, заключается в том, что они, как правило, хорошо выглядят только при определенных размерах из-за таких вещей, как слишком много или слишком мало деталей, нечеткие формы и т. Д. Но иконки Font Awesome совсем не такие.Кажется, они созданы для работы в любом месте и отлично выглядят независимо от того, какой размер вы хотите использовать. Кроме того, давайте помнить, что все они векторы, поэтому масштабирование также не является технической проблемой.

Самое главное, что иконки Font Awesome достигают трех основных целей с точки зрения дизайна:

• Дизайн от значка к значку одинаков, поэтому все сочетается друг с другом.
• Дизайн очень минимален, что позволяет использовать иконки для различных целей (особенно хорошо они выглядят для элементов навигации).
• Количество становится качеством — независимо от того, сколько иконок вам нужно, Font Awesome сможет предоставить.

Хорошо, перейдем к практической части обзора:

Font Awesome WordPress Usage

Оставив в стороне все эти похвалы, давайте посмотрим, как мы можем использовать Font Awesome с WordPress. Или, скорее, проблема возникает, если вы никогда не были в разделе « внешний вид / редактор » в wp-admin . Чтобы установить Font Awesome на свой сайт WordPress, у вас есть два варианта:

• Ручная установка
• Через плагины

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

Хотя оба технически выполняют свою работу, есть некоторые проблемы. Начиная с Better Font Awesome, как вы понимаете, получить функциональность очень просто — просто установите и активируйте плагин (вам не нужно переходить к самому Font Awesome или чему-то еще). Все, что вам нужно, это плагин.

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

Так работает большую часть времени, судя по отзывам. Но не всегда. Например, для меня это полностью испортило мой CSS — например, весь мой стиль темы перестал работать (а это тема Twenty Fifteen по умолчанию, о которой мы здесь говорим, так что ничего особенного).

Шрифт Awesome WordPress Usage

Я не говорю, что плагин вызовет эти проблемы и у вас, но вы, вероятно, со временем столкнетесь с различными проблемами, такими как эта, особенно когда будут выпущены новые версии Font Awesome или WordPress.Возможно, это того не стоит. Представьте, что однажды вы обновите свой сайт, и ваш CSS исчезнет. Сколько времени у вас уйдет на то, чтобы отследить проблему до конкретного плагина? Сколько посетителей за это время увидят урезанный сайт?

Теперь о другом плагине, Font Awesome 4 Menus. Это действительно работает и, похоже, работает достаточно хорошо. Все, что вам нужно сделать, это установить его, а затем вы можете добавить пользовательские классы в свои пункты меню, например:

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

Это очень хорошо, если вам просто нужно использовать Font Awesome WordPress для меню, но, к сожалению, он не работает, если вы хотите отображать значки в контенте. Экспонат (а):

Интеграция

По сути, как подробно описано здесь, вы можете сделать это двумя разными способами:

• Получите прямой код встраивания прямо из Font Awesome.
• Загрузите пакет, а затем загрузите его на свой сервер через FTP.

Изначально у меня возникло искушение загрузить его и разместить у себя, но потом я понял, что это будет означать только дополнительную работу. Конечно, получение самого пакета и загрузка его через FTP — это не , а много работы (# ленивый), но вы также должны позаботиться о его обновлении.

С другой стороны, когда вы имеете дело с встраиванием, все заботятся о вас. И если отложить все работы по обслуживанию, вы также получите пакет, обслуживаемый CDN, что также лучше для производительности.

Счет

Практическая часть очень проста, просто введите свой адрес электронной почты и получите код для встраивания, который вам доставят:

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

Итак, когда у вас есть код, просто перейдите в раздел « appearance / editor » вашего wp-admin ( всегда делайте резервную копию всего вашего сайта и любых отдельных файлов, прежде чем вносить какие-либо изменения ), и добавьте этот код в раздел вашей темы.Обычно это файл header.php , например:

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

Сразу после включения кода встраивания вы включили Font Awesome на своем сайте. Работа сделала — теперь вы можете использовать все значки, как вам угодно!

Как я уже упоминал, при получении кода для встраивания вам также предлагается возможность зарегистрировать свою учетную запись в Font Awesome.Это не обязательно, но я рекомендую вам это сделать. Учетная запись бесплатна, и вы получаете взамен пару вещей:

• Возможность настройки вашего встраивания.
• Хорошая статистика по иконкам, которые вы используете.

Почему Премиум?

Сначала я не знал, что Font Awesome также предлагал премиум-версию своего продукта под названием Fort Awesome.

Что нужно знать об этом:

• В нем еще тысячи значков.С Fort Awesome вы получаете множество дополнительных иконок, разделенных на отдельные наборы (тематические, разные стили дизайна и т. Д.). Это позволяет удовлетворить все потребности вашего сайта в значках с помощью одного инструмента, особенно если вам нужен очень специфический набор вещей для представления с помощью значков.
• Вы можете загружать и использовать свои собственные значки. Это круто, потому что это позволяет вам загружать такие вещи, как ваш логотип, значки продуктов или что-то еще, что имеет смысл, и добавлять их в свою библиотеку Font Awesome. Преимущество здесь в том, что вы затем можете использовать эти значки так же, как и любые другие значки Font Awesome — все ваши значки работают одинаково, независимо от источника.
• Вы получаете индивидуальные настройки. Вы можете установить домены, в которых могут использоваться ваши наборы значков, и так далее.
• Вы можете включать гарнитуры в свои наборы. Вы можете выбрать один из нескольких лучших бесплатных шрифтов или загрузить свой собственный. Благодаря этому все ваши типографские материалы для сайта будут собраны в одном месте.
• Вы можете загрузить все это через оптимизированный CDN, предоставляемый через MaxCDN.

В конце концов, ядро ​​премиального предложения Font Awesome — это простота использования, повышение производительности и общее простое управление всеми вашими значками и шрифтами.

При этом, это предложение премиум-класса, вероятно, принесет пользу только крупным веб-сайтам, магазинам электронной коммерции или тематическим веб-сайтам. В конце концов, вам, вероятно, понадобится всего несколько значков на вашем сайте, и вы не будете обновлять их очень часто — по крайней мере, если мы говорим о стандартных блогах WordPress.

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

Также стоит отметить, что Font Awesome Premium не является пакетом «все включено». Существуют дополнительные платные наборы значков (до 50 долларов за штуку), так что вы можете все еще тянуться к своему кошельку даже после того, как получите премиальное предложение.

Все сводится к тому, что Fort Awesome (Font Awesome Premium) не обязательно лучший вариант для большинства блогов WordPress.Я искренне верю, что бесплатное предложение, скорее всего, удовлетворит ваши потребности в 99% случаев.

Когда дело доходит до премиум-класса, это, вероятно, хорошее вложение только в том случае, если вы управляете большим сайтом, который полагается на визуальное представление различных элементов, продуктов или меню и очень часто добавляет новые элементы в библиотеку. В этих сценариях вы также выиграете от доставки CDN от Font Awesome, что сделает ваш сайт быстрее.

Заключение

Мы действительно думаем, что Font Awesome — отличный продукт, и мы рекомендуем использовать Font Awesome WordPress.Еще никогда не было так просто добавить классные, красиво оформленные значки на свой веб-сайт. Вы буквально на расстоянии одного тега от (почти?) Идеального значка для всего, что вы хотите визуализировать.

Font Awesome использования WordPress в двух словах:

• Font Awesome Использование WordPress бесплатно: Да, да, да.
• Font Awesome премиум-класса (Fort Awesome): Meh.
• Различные плагины для WordPress Font Awesome: Хорошо, но не потрясающе.

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

Как добавить отличные шрифтовые иконки в меню WordPress — WP Tavern

Font Awesome — это иконочный шрифт, состоящий из 369 масштабируемых векторов, которые можно настроить с помощью CSS для изменения размера, цвета, добавления теней, настройки непрозрачности и т. Д. Хотя изначально он был разработан для Twitter Bootstrap, шрифт доступен для использования в любом проекте. . У этих значков меньше проблем с совместимостью, поскольку для них не требуется JavaScript.Они также отлично смотрятся на дисплеях Retina, потому что шрифт состоит из векторов, которые можно масштабировать до любого размера.

Ранее в этом году иконочный шрифт Font Awesome был запрещен в репозитории плагинов WordPress из-за его лицензии. Плагины, загружавшие шрифт, были закрыты. Наконец, в мае 2013 года WordPress снял запрет на Font Awesome после того, как обновил свою лицензию, сделав ее открытой и совместимой с GPL.

Разработчики плагинов и тем теперь могут свободно использовать шрифт в своих расширениях при условии, что они не загружаются из CDN.Font Awesome 4 Menus — один из новейших плагинов, которые включают в себя иконочный шрифт. Он заменяет старую версию, в которой было меньше функций. Этот плагин позволяет добавлять значки в меню WordPress без необходимости настраивать разметку или знать какой-либо CSS. Процесс очень прост, и мы можем сделать это за три простых шага.

Шаг 1. Установите плагин Font Awesome 4 Menus

Плагин Font Awesome 4 Menus загружает значок шрифта на ваш сайт, чтобы вы могли использовать его в своих меню и содержимом.Добавьте его на свой сайт WordPress через меню «Плагины » >> «Добавить новый ». Для этого плагина нет настроек, которые можно было бы изменить.

Шаг 2. Показать параметры классов CSS на экране меню

Когда вы переходите к Внешний вид >> Меню и редактируете отдельные пункты меню, вам нужно будет использовать опцию «Классы CSS». Это можно включить, используя меню «Параметры экрана» вверху страницы.

Шаг 3. Введите CSS-класс для значка меню

Последний шаг — найти класс CSS для значка, который вы хотите использовать, и вставить его в поле CSS Classes для пункта меню, который вы хотите обновить.

Вы можете найти CSS-класс для своего значка на домашней странице Font Awesome или в шпаргалке. Каждый из них имеет префикс «fa-», чтобы отличать их от любых других общих классов, которые, возможно, уже используются.

Вот конечный результат с добавлением значков для каждого пункта меню:

Меню WordPress с Font Awesome Icons

Помимо добавления значков в меню, Font Awesome также можно использовать в вашем контенте WordPress с помощью шорткода, включенного в этот плагин:

 [fa] 

Плагин также позволяет загружать значки с накоплением, что является новой функцией в последней версии Font Awesome 4.Здесь вы можете увидеть пример загрузки нескольких значков друг на друга:

 [fa-stack] [fa] [fa] [/ fa-stack] 

Вы также можете использовать старый простой HTML в своей теме или содержимом для отображения значков. Однако я бы предупредил, что если вы хотите широко использовать шрифт значков во всем своем контенте, вам гораздо лучше не использовать плагин. Если когда-нибудь плагин перестанет обслуживаться, вам будет лучше, если вы добавите Font Awesome вручную.

Плагин Font Awesome 4 Menus был создан ребятами из New Nine, и вы можете посмотреть его живой пример на их веб-сайте.Плагин загружает одну миниатюрную таблицу стилей (18 КБ) для загрузки шрифтов, поэтому вы не должны испытывать снижения производительности на компьютере или мобильном устройстве, если решите использовать значок шрифта на своем сайте. Я протестировал его вчера вечером и обнаружил, что он работает так, как ожидалось. Загрузите Font Awesome 4 Menus бесплатно из репозитория плагинов WordPress.

Нравится:

Нравится Загрузка …

Как интегрировать WordPress с Font Awesome

Если вы хотите добавить немного яркости своему контенту WordPress с помощью настраиваемых значков, у вас есть несколько вариантов: (1) либо купить хорошие значки где-нибудь (или приобрести их другим способом … халява, пакеты значков и т. Д.)) или (2) используйте Font Awesome.

Вот как:

Что такое Font Awesome?

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

У такого рода решений есть несколько важных преимуществ:

• Вам не нужно иметь дело с самими иконками — как в случае с графическими файлами, которые могут не захотеть сотрудничать с вами.
• Значки ведут себя так же, как любой другой шрифт — это означает, что вы можете установить их любого размера, а также свободно стилизовать их с помощью таких вещей, как CSS.
• Независимо от размера значка, который вы хотите использовать, он всегда будет отлично выглядеть. С технической точки зрения, эти значки являются векторной графикой — это то, что делает их бесконечно масштабируемыми.
• Всё бесплатно.

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

Когда дело доходит до размера библиотеки значков Font Awesome, он действительно впечатляет.Вы получаете более 630 значков, которые представляют самые разные вещи. От валюты до транспорта, погоды, типов файлов, значков приложений, значков текстового редактора и многого другого.

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

Хорошо, к основному вопросу:

Как установить Font Awesome на WordPress

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

При этом ни один из этих плагинов (по крайней мере, бесплатных) действительно не справляется с этой задачей. Так что это на самом деле один из немногих случаев, когда ручная интеграция Font Awesome с WordPress лучше, чем с плагинами.

Для начала просто перейдите на официальную страницу начала работы. Там вы можете либо загрузить пакет Font Awesome напрямую (рис. A), либо отправить свой адрес электронной почты, что даст вам доступ к встраиваемому коду Font Awesome (рис. B).

Фиг.

Рис. B

Я настоятельно рекомендую вам использовать последнее — вместо загрузки пакета получите код для встраивания от Font Awesome.

Вы получите несколько преимуществ, если сделаете это таким образом:

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

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

Два альтернативных способов сделать это:

• (a) Проверьте страницу настроек текущей темы, чтобы узнать, есть ли возможность добавить что-нибудь в тему head . В некоторых темах есть такие опции. Так что, если у вас есть, не стесняйтесь использовать его — введите туда код для встраивания Font Awesome.
• (b) Перейдите в панель управления WordPress, а затем в Внешний вид> Редактор . Выберите файл header.php вашей темы и вручную добавьте код внедрения Font Awesome где-нибудь в разделе head . Вот так:

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

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

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

Если вы хотите, например, включить значок Font Awesome в сообщение в блоге, все, что вам нужно сделать, это сначала выбрать конкретный значок (вот полная библиотека), а затем добавить его в сообщение в блоге следующим образом: (используйте редактор Text , а не редактор Visual ).