Font Awesome подключить к сайту иконки (шрифты)

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

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

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

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

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

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

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

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

    Как подключить иконки Font Awesome к сайту, блогу

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

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

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

    <link href='https://use.fontawesome.com/releases/v5.0.6/css/all.css' rel='stylesheet'/>


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

    Как добавить к нужному элементу

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

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



    Поделиться в социальных сетях:
    Facebook Twitter Google+ Vkontakte

    Рекомендуем

    1 Коммент.:

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

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

    Ответить