Font Awesome в шаблоне AB-Inspiration 6.0

  Автор:
  1862

Давно хотела подключить Font Awesome в шаблон AB-Inspiration и вот в шестой версии все кнопки, картинки я заменила на шрифтовые иконки Font Awesome.

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

Что такое Font Awesome

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

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

Font Awesome в плагине «Входная страница»

Сначала я подключила Font Awesome к плагину «Входная страница». Если вы пользуетесь данным плагином, то знаете, что в контенте «Произвольно» есть возможность выбрать иконки. Так вот, эти иконки и есть Font Awesome.

icons

Где применяются иконки Font Awesome в шаблоне AB-Inspiration

  • Иконки Дата, Автор, Комментарии под заголовком статей
  • Иконки соц сетей в кнопках «Поделиться»
  • Буллеты в маркированных списках
  • Иконки соц сетей в виджете «Следуй за мной»
  • Иконка стрелочки в кнопке «Читать далее»
  • Иконка «Инстаграм» в кнопке «Подписаться на Instagram» в виджете
  • Иконка метки в метках под статьей и в виджете

icons1

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

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

Зайти на сайт Font Awesome на страницу «Icons» — https://fortawesome.github.io/Font-Awesome/icons/

1. Выберите из списка иконку, которую хотите использовать в тексте и кликните по ней. Так вы перейдете на страницу с иконкой

icons5

Страница иконки "Сердечко"

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. Уверена, обновление вас порадует, особенно если вы публикуете много фото с мероприятий или путешествий.

Font Awesome в шаблоне AB-Inspiration 6.0

   2 голоса
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ

Комментарии в Фейсбук
Комментарии в Вконтакте