Давно хотела подключить Font Awesome в шаблон AB-Inspiration и вот в шестой версии все кнопки, картинки я заменила на шрифтовые иконки Font Awesome.
В этой статье я расскажу, где именно используются данные иконки в шаблоне и как вы можете их использовать в тексте ваших статей.
Что такое Font Awesome
Прежде всего пару слов о том, что такое Font Awesome. Это бесплатный иконочный шрифт. Это набор правил стилей CSS, которые создают шрифтовые иконки. Да, да, именно шрифтовые. То есть практически то, что раньше было картинками, сейчас является шрифтовыми изображениями. Чтобы это понять, представьте, что каждая буква это тоже изображение. Кто-то придумал для нее шрифт, нарисовал его, и сейчас мы просто набираем на клавиатуре буквы и печатаем слова. Вот такие же картинки нарисовали и для различных иконок, превратили их в шрифт и заключили в стиль CSS.
На сегодня в последней версии Font Awesome 4.4.0 доступно 585 различных иконок. Все они выполнены в одном стиле. Для них можно как для текста указывать размер и цвет. В общем великолепная технология во всех отношениях.
Font Awesome в плагине «Входная страница»
Сначала я подключила Font Awesome к премиум плагину «Входная страница». Если вы пользуетесь данным плагином, то знаете, что в контенте «Произвольно» есть возможность выбрать иконки. Так вот, эти иконки и есть Font Awesome.
Где применяются иконки Font Awesome в шаблоне AB-Inspiration
- Иконки Дата, Автор, Комментарии под заголовком статей
- Иконки соц сетей в кнопках «Поделиться»
- Буллеты в маркированных списках
- Иконки соц сетей в виджете «Следуй за мной»
- Иконка стрелочки в кнопке «Читать далее»
- Иконка «Инстаграм» в кнопке «Подписаться на Instagram» в виджете
- Иконка метки в метках под статьей и в виджете
Как можно использовать иконки Font Awesome в статьях
Специального функционала для использования Font Awesome в статьях нет, но раз Font Awesome подключен к шаблону, то иконки можно использовать и просто в статьях. Для этого нужно сделать следующее.
Зайти на сайт Font Awesome на страницу «Icons» — https://fortawesome.github.io/Font-Awesome/icons/
1. Выберите из списка иконку, которую хотите использовать в тексте и кликните по ней. Так вы перейдете на страницу с иконкой
2. На странице с иконкой спуститесь чуть ниже и скопируйте код. Например, код сердечка выглядит так:
<i class="fa fa-heart"></i>
3. Откройте запись в режиме «Текст» и вставьте код иконки в нужном месте
Пример: получилось замечательно
Размер иконок Font Awesome
Задать размер можно двумя способами:
1. Добавить к классу один из 5-ти встроенных размеров
<i class="fa fa-heart fa-lg"></i> <i class="fa fa-heart fa-2x"></i> <i class="fa fa-heart fa-3x"></i> <i class="fa fa-heart fa-4x"></i> <i class="fa fa-heart fa-5x"></i>
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
2. Указать размер в стиле
<i class="fa fa-heart" style="font-size:70px;"></i>
font-size:70px;
Цвет иконок Font Awesome
Цвет иконок также задается в стиле.
<i class="fa fa-heart" style="font-size:20px; color:#cc0000"></i> <i class="fa fa-heart" style="font-size:30px; color:#19619b"></i> <i class="fa fa-heart" style="font-size:40px; color:#11ff05"></i> <i class="fa fa-heart" style="font-size:50px; color:#fce702"></i> <i class="fa fa-heart" style="font-size:60px; color:#ff6c60"></i>
color:#cc0000
color:#19619b
color:#11ff05
color:#fce702
color:#ff6c60
Замечательный функционал в новом шаблоне AB-Inspiration. Уверена, вам понравится. Теперь наш блог на шаблоне AB-Inspiration украшен стильными иконками в одном стиле. И еще с иконками Font Awesome у есть возможность украсить статьи интересными иконками 
В следующей статей я продолжу рассказ о новшествах в шаблоне AB-Inspiration 6.0. Я расскажу про Улучшения отображения галереи из фото в шаблоне AB-Inspiriation. Уверена, обновление вас порадует, особенно если вы публикуете много фото с мероприятий или путешествий.
Создать сайт для заработка с нами — легко и быстро!
За помощью обращайтесь в нашу службу поддержки 24/7
Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
а также, хостинг Beget:
Средняя оценка: 3.7 из 5
