/ Сайтостроение / Дизайн / Иконки для сайта FontAwesome

Иконки для сайта FontAwesome

HIT

03.07.2015

3156

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 4.

Font Awesome 5

Новая версия, даже в бесплатной версии 1341 иконка (в версии 4, было 675 шт).

Все иконки Font-Awesome 5.

Чтобы применять иконки для псевдоэлементов, необходимо обязательно прописывать font-weight соответствующей толщины. т.к. в новой концепции Font Awesome 5 имеют 3 типа толщины: Solid (font-weight: 600;), Regular (font-weight: 200-400;), Light (только в PRO версии).

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Относительные единицы измерения

Относительные единицы измерения

Изначально при разработке шаблонов сайтов пользуюсь единицей измерения px. Но данный подход не является идеальным, т.к. имеет ряд недостатков. Рассмотрим альтернативные варианты задания размера текста. Единицы измерения — px px Читать далее »

Стили текста

Стили текста

Приводим различные варианты оформления текстовой информации. Список Список с маркерами-изображениями 39 номеров 3 конференц-зала Ресторан .punkt li { margin: 5px 0; padding-left: 20px; list-style-type: none; background: url(//undersun-hotels.ru/wp-content/themes/meisterwerk/images/doth.gif) no-repeat left 6px; Читать далее »

Установка шрифтов

Установка шрифтов


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Установка шрифтов — один из важнейших этапов разработки дизайна сайта. В данном процессе множество нюансов как в плане дизайна. так и чисто технических. Рассмотрим различные аспекты связанные с установкой шрифтов Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Иконки для сайта FontAwesome
Отложенная загрузка видео
Рекомендации для васОтложенная загрузка видеоOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.