FontAwesome — иконочный шрифт (более 600 иконок) который подойдет для большинства сайтов (для контактов, навигации, интернет-магазина и т.д.).
Установка шрифта
Скачиваем шрифт с сайта. Копируем в наш сайт папку fonts и стиль из папки css (font-awesome.css, либо font-awesome.min.css). В файле стиля font-awesome.css в начале файла меняем пути к папке шрифта с
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
на
src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
Оперативное подключение шрифта FontAwesome
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Использование шрифта
Для стандартного использования просто вставляем код из перечня имеющихся иконок.
Для использования в стилях CSS, например :after :before, нужно прописать свойство font-family: FontAwesome;
и код конкретной иконки content: «\f047»; Все коды прописаны в файле стиля font-awesome.css
Пример:
.element {position: relative;}
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}
Font Awesome 5
Новая версия, даже в бесплатной версии 1341 иконка (в версии 4, было 675 шт).
Чтобы применять иконки для псевдоэлементов, необходимо обязательно прописывать font-weight соответствующей толщины. т.к. в новой концепции Font Awesome 5 имеют 3 типа толщины: Solid (font-weight: 600;), Regular (font-weight: 200-400;), Light (только в PRO версии).
[site-socialshare]
