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

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

HIT

03.07.2015

3588

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; Читать далее »

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

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

Иконки для сайта FontAwesome
Подключаем КЛАДР
Рекомендации для васПодключаем КЛАДРOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.