Иконки font awesome css как подключить. Видео

Иконки font awesome css как подключить
Иконки font awesome css как подключить? Именно так звучит название темы, которую мы с вами постараемся разобрать, как можно подробней. С уверенностью этот материал можно отнести к разделу "Инструменты для сайта" смотрите в правой панели сайта, возможно найдете еще, что-нибудь интересное для себя.

Что такое font awesome (перевод с анг. - крутой или клевый шрифт) - это вспомогательный инструмент (иконка), который помогает выделить определенный элемент на сайте или блоге.

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

Что же можно выделить с помощью иконок font awesome? Допустим на моем сайте есть главное меню, которое разбито на несколько категорий: WordPress, Joomla, Blogger и т.д. так вот для более презентабельного вида можно каждой из этих ячеек задать соответствующею иконку.
иконки font awesome пример для главного меню
Правда в базе Font Awesome на все случаи жизни иконок не найдется, но это пока что, ведь с каждым месяцем количество иконок заметно прибавляется.

Так же можно выделять некоторые заголовки или подзаголовки в постах:
иконки font awesome пример для текста в постах

Очень полезны иконки font awesome для такого типа сайта, как Landing Page. Сейчас просто невозможно представить презентацию одностраничника без данного инструмента.
иконки font awesome пример для landing page

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

Как подключить иконки Font Awesome

Вот мы с вами и добрались к самой важной части. Подключить иконки font awesome проще простого. Для этого вам нужно открыть HTML редактор своего сайта и в промежутке между тегами <head> ... </head> вставить тег, который подключит ваш сайт к базе font awesome:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

Сохраните изменения.

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

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


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Иконки font awesome css как подключить. Видео
4/ 5
Oleh

1 Коммент.:

Оставить комментарий
avatar
Максим Сафронов
августа 06, 2017

Спасибо за информацию, классная штука, надо будет как-нибудь заняться

Ответить