Как подключить шрифт Font Awesome к WordPress и украсить сайт иконками

Как подключить шрифт Font Awesome

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

1. Добавление иконочного шрифта в WordPress с помощью плагина

Это самый простой и удобный способ, который хорошо работает почти со всеми темами WP. Плагин так и называется - Font Awesome. Установите его, как обычно, из админпанели. Но не забывайте, что плагинами увлекаться не стоит. Желательно, чтобы на сайте их было не более 15-ти.

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

<i class="fas fa-phone"></i>

2. Добавление шрифта Font Awesome в виде кода со ссылкой

Для этого придётся редактировать файлы functions.php или header.php.

Нужно перейти на https://fontawesome.com/ и получить код со ссылкой для встраивания на свой сайт. Для этого придётся зарегистрироваться и оставить email, потому что ссылка придёт именно на него. Выглядит это примерно так:

<script src="https://use.fontawesome.com/12347458abcdef.js"></script>

Это строка, которая загружает библиотеку Font Awesome со своих серверов.

1 способ для файла functions.php:
Это более правильный способ для WordPress, когда для вызова скриптов используется файл с функциями. В файл functions.php нужно добавить такой код с вашей ссылкой:

function wpschool_load_fontawesome() {
wp_enqueue_script( 'font-awesome', 'https://use.fontawesome.com/12347458abcdef.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', wpschool_load_fontawesome);

Обратите внимание, что тег <script> здесь не используется.

2 способ для файла header.php:
Если не хочется редактировать файл с функциями, то ссылку на иконочный шрифт можно добавить перед тегом в файле header.php. перед тегом </head>. Здесь уже тег <script> должен присутствовать.То есть вставляем код в том виде, в котором получили в письме.

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

После подключения иконочного шрифта нужная иконка выбирается на сайте шрифта по ссылке из верхнего меню «Icons».

Как стилизовать иконочный шрифт Font Awesome

Со значками иконок можно делать то же самое, что и с обычным шрифтом: менять цвет, размер, делать маркером списка, анимировать, позиционировать. Это можно делать как в css файле, так и прямо в записи WordPress.

Например, чтобы изменить цвет иконки на белый, размер на 20 px и задать ей отступ справа 10 px, нужно прописать такой стиль в файле CSS:

i{
color: #fff;
font-size: 20px;
margin-right: 10px;
}

Как изменить размер иконки прямо в записи WordPress, не редактируя CSS-файл

Для увеличения размеров иконок в родительском элементе используйте классы fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или fa-5x.





<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

Иногда различная ширина иконок мешает их правильному выравниванию. В этом случае им удобно задать фиксированную ширину с помощью класса fa-fw.

<div class="list-group">

<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Главная</a>

<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Библиотека</a>

<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Приложения</a>

<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Настройки</a>
</div>
</div>

Как сделать иконку Font Awesome маркером списка

Шрифтовые иконки можно использовать в нумерованных списках вместо стандартных маркеров. Для этого достаточно добавить классы fa-ul и fa-li.

  • пункт 1
  • пункт 2
  • пункт 3
  • пункт 4

<ul class="fa-ul">
<li><i class="fa-li fas fa-check-square"></i>пункт 1</li>
<li><i class="fa-li fas fa-caret-right"></i>пункт 2</li>
<li><i class="fa-li fas fa-arrow-circle-right"></i>пункт 3</li>
<li><i class="fa-li fas fa-angle-double-right"></i>пункт 4</li>
</ul>

Но когда мы работаем со списками, иконки всё же удобнее добавлять через файл CSS. Вот код для добавления стрелочки вправо перед каждым пунктом списка:

#secondary li{
list-style: none;
position: relative;
padding: 7px 0 0 18px;
}
#secondary li:before{
position: absolute;
top: 8px;
left: 0;
content: '\f105';
font-family: "FontAwesome";
}

Здесь f105 - это Unicode иконки, который также берётся с сайта Font Awesome.

Как заставить иконку вращаться

Если использовать класс fa-spin, то иконка будет вращаться, а если использовать класс fa-pulse, то она начнёт вращаться по 8 шагов. Правило также работает с классами fa-spinner, fa-refresh, и fa-cog.


Загрузка...


Загрузка...


Загрузка...


Загрузка...


Загрузка...

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Загрузка...</span>

Как заставить иконку повернуться

Для того, чтобы повернуть и отзеркалить иконку, используйте классы fa-rotate-* и fa-flip-*.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

<i class="fas fa-snowboarding"></i> normal<br>
<i class="fas fa-snowboarding fa-rotate-90"></i> fa-rotate-90<br>
<i class="fas fa-snowboarding fa-rotate-180"></i> fa-rotate-180<br>
<i class="fas fa-snowboarding fa-rotate-270"></i> fa-rotate-270<br>
<i class="fas fa-snowboarding fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fas fa-snowboarding fa-flip-vertical"></i> fa-flip-vertical

Желаю всем красивых сайтов и высоких позиций!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

PHP Code Snippets Powered By : XYZScripts.com