Font awesome bootstrap: Font Awesome, the iconic font designed for Bootstrap

Leave a Comment / Разное / By /

Содержание

Конфликт значков между bootstrap и font-awesome



В моем проекте, Во-первых, я использую Bootstrap icon, но я обнаружил, что bootstrap имеет меньше значков, поэтому я хочу использовать font-awesome, но когда я импортирую файл font-awesome css, значок меняется на font-awesome type.

Потому что в другом месте просто используйте значок bootstrap, поэтому я хочу, чтобы значок, уже используемый в моем проекте, все еще просматривался в bootstrap type, специальный значок в font-awesome я также хочу добавить его.

Сохраните старый тип значка и добавьте новый шрифт-удивительный значок в то же время, как я должен это сделать? Кто-нибудь может мне помочь?

css twitter-bootstrap font-awesome
Поделиться Источник Gabriel Zhang     24 сентября 2013 в 10:40

2 ответа

  • Bootstrap и font-awesome в MVC4

    Я использую MVC4 и добавил Bootstrap и Font Awesome через nuget.

    Я вижу, как Bootstrap поставляется в комплекте через BootstrapBundleConfig.cs (который был добавлен пакетом nuget) ниже: public static void RegisterBundles() { BundleTable.Bundles.Add(new…

  • В чем разница между «font-awesome» и «font-awesome-rails»?

    Я пытался установить font-awesome в Rails. Мне это удалось, но в конце концов я вошел в свою консоль и ввел: bundle show font-awesome. Консоль напечатала C: / […]/gems/font-awesome-rails-4.1.0.0. Затем я ввел bundle show font-awesome-rails. Затем консоль снова напечатала тот же путь. В чем…


1

Это случай, когда обе платформы используют одни и те же имена классов для своих значков.

Я считаю, например, что они оба используют класс .icon-cart , но имеют разные изображения

Если вам будет необходимо отредактировать классы CSS, относящиеся к четкому определению того, что к чему относится.

Таким образом, вы можете отредактировать CSS так, чтобы класс FontAwesome был (например) .awesome-icon-cart , чтобы отличить его от начальной загрузки glyphs…and и так далее.

Поделиться Paulie_D     24 сентября 2013 в 10:53


0

Шрифт awesome дает вам возможность использовать его без начальной загрузки. Я бы сделал это, чтобы можно было отдельно загрузиться, а затем найти местоположение в font-awesome, которое указывает имена классов и префикс его с fa — или что-то подобное.

Поделиться R Reveley     24 сентября 2013 в 10:51

Похожие вопросы:


Невозможно перезаписать шрифт bootstrap-sass шрифтом font-awesome

Я использую bootstrap-sass и драгоценные камни font-awesome ( https://github.com/littlebtc/font-awesome-sass-rails ). Я бы хотел, чтобы переопределить начальной загрузки шрифта из шрифтов-огромная….


Как я могу добавить ‘Font Awesome’ в свое приложение с помощью twitter-bootstrap?

Возможный Дубликат : Rails: Использование Шрифта Awesome У меня есть приложение Rails, в котором я использую много значков twitter-bootstrap. Для этого я поместил boostrap.css.erb непосредственно в…


создание пространства между строками значков Font awesome с помощью css

У меня есть часть выбора, где у меня есть несколько значков Font Awesome, а под выбранным значком есть панель. Все идет хорошо, пока у меня есть только 1 ряд значков. Когда у меня есть несколько…


Bootstrap и font-awesome в MVC4

Я использую MVC4 и добавил Bootstrap и Font Awesome через nuget. Я вижу, как Bootstrap поставляется в комплекте через BootstrapBundleConfig.cs (который был добавлен пакетом nuget) ниже: public…


В чем разница между «font-awesome» и «font-awesome-rails»?

Я пытался установить font-awesome в Rails. Мне это удалось, но в конце концов я вошел в свою консоль и ввел: bundle show font-awesome. Консоль напечатала C: / […]/gems/font-awesome-rails-4.1.0.0….


Bootstrap 3-Glyphicon и Font Awesome вместе? возможно?

Просто быстрый вопрос: в Bootstrap 3, который я упаковал, был закомментирован файл Glyphicon LESS, потому что в нем был упакован FA (Font Awesome), есть ли какая-то причина, по которой я не могу…


Rails 4-Bootstrap 3-Font Awesome

Кажется, я не могу найти ни одного gem или комбинации драгоценных камней, которые поддерживают Bootstrap 3 и Font Awesome в проекте Rails 4. Каков наилучший способ заставить это работать, включая…


Bootstrap: Font-Awesome не работает в подпапке?

Я скачал тему Creative Bootstrap, которая имеет следующую структуру папок css/ img/ js/ less/ vendor/ index.html Теперь я создал subfolder , скопировал index.html в папку и изменил ссылки из файлов…


Настройка значков маркеров react-leaflet с помощью font awesome

Это скорее теоретический вопрос, чем проблема. Как использовать font awesome icons в качестве значков маркеров карты react-leaflet ? Я хотел бы иметь такой элемент управления селектором значков,…


Как использовать Font-Awesome с NbActionComponent?

Я успешно использую смесь стандартных значков Eva и шрифтов Awesome icons с Nebular 4 в Ngx-Admin. Я могу настроить как компоненты NbIcon , так и NbMenuItem для использования либо значков Eva по…

Bootstrap 3 — Иконки Font Awesome

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

Чтобы подключить шрифт Font Awesome на свой веб-сайт вы можете воспользоваться двумя способами:

  • Самый простой способ – это с помощью Bootstrap CDN. Для этого необходимо добавить одну строчку кода в раздел заголовка сайта. Ни чего загружать и устанавливать не надо. 
     
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  • Второй способ заключается в скачивании шрифта Awesome со страницы проекта, его распаковки в каталог сайта и подключения CSS файла «font-awesome.min.css». 
    
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    Готовую сборку с платформой Twitter Bootstrap 3 можете скачать по ссылке.

Использование иконок шрифта Awesome

Вы можете поместить иконки Awesome практически в любом месте, используя CSS префикс fa и имя иконки, которые расположены на сайте. Шрифт Awesome предназначен для использования со строчными элементами HTML (можно использовать тег <i> для краткости, но использование тега <span> семантически более правильно).


<i></i> fa-camera-retro

Выше приведенный код будет выглядеть примерно так:

fa-camera-retro

Создание иконок увеличенного размера

Для увеличения размера иконок Вы можете воспользоваться классами fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или fa-5x.


<i></i> fa-lg
<i></i> fa-2x
<i></i> fa-3x
<i></i> fa-4x
<i></i> fa-5x

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

Создание иконок с фиксированной шириной

Иконки с фиксированной шириной очень полезны при создании навигационных меню или различных списков. Чтобы создать такие иконки, используйте класс fa-fw.


<div>
  <a href="#"><i></i>  Главная</a>
  <a href="#"><i></i>  Книги</a>
  <a href="#"><i></i>  Статьи</a>
  <a href="#"><i></i>  Параметры</a>
</div>

Иконки для маркированных списков

С помощью классов fa-ul и fa-li Вы можете заменить стандартные маркеры в неупорядоченных списках на другие иконки.


<ul>
  <li><i></i>Иконки Awesome</li>
  <li><i></i>могут использоваться</li>
  <li><i></i>как маркеры</li>
  <li><i></i>неупорядоченных списков</li>
</ul>

  • Иконки Awesome
  • могут использоваться
  • как маркеры
  • неупорядоченных списков

Создание «вытянутых» иконок

Для создания «вытянутых» кавычек или иконок статей используйте классы fa-border и pull-right или pull-left.


<i></i>
...Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

…Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

Создание вращающихся иконок

Для создания вращающейся иконки используйте класс fa-spin.


<button type="button"><i></i></button>
<button type="button"><i></i></button>
<button type="button"><i></i></button>
<button type="button"><i></i></button>

Создание повернутых и зеркально отраженных иконок

Чтобы повернуть и зеркально отразить иконки, используйте следующие классы fa-rotate-* и fa-flip-*.


<i></i> иконка<br>
<i></i> иконка, повернутая на 90 градусов по часовой стрелки<br>
<i></i> иконка, повернутая на 180 градусов по часовой стрелки<br>
<i></i> иконка, повернутая на 270 градусов по часовой стрелки<br>
<i></i> иконка,отраженная по горизонтали<br>
<i></i> иконка, отраженная по вертикали

иконка
иконка, повернутая на 90 градусов по часовой стрелки
иконка, повернутая на 180 градусов по часовой стрелки
иконка, повернутая на 270 градусов по часовой стрелки
иконка,отраженная по горизонтали
иконка, отраженная по вертикали

Иконки, наложенные друг на друга

Чтобы наложить несколько иконок друг на друга, используйте класс «fa-stack» на родительском элементе, класс «fa-stack-1x» для иконки, который расположен на переднем плане и класс «fa-stack-2x» для иконки, расположенной на заднем плане. Класс «fa-inverse» может использоваться для инвертирования цвета иконки.


<span>
  <i></i>
  <i></i>
</span>
иконка "Twitter" на иконке "квадрата"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "флага" на иконке "круга"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "терминала" на иконке "квадрата"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "запрещено" на иконке "камеры"

иконка «Twitter» на иконке «квадрата»
иконка «флага» на иконке «круга»
иконка «терминала» на иконке «квадрата»
иконка «запрещено» на иконке «камеры»

Font Awesome | WebReference

Font Awesome — это шрифт с иконками, которые могут добавляться к любым элементам веб-страницы, чтобы повысить их наглядность и улучшить дизайн. Разработчик Дэйв Ганди собрал впечатляющую коллекцию из несколько сотен иконок подходящих под любые задачи.

Преимущества

  • Все иконки векторные и масштабируются в самых широких пределах, без ухудшения их качества.
  • Поскольку иконка представляет собой текстовый символ, то к нему применяются любые стилевые свойства, доступные для шрифтов — допустимо изменять цвет, фон, добавлять тень и т. д.
  • Иконки хорошо работают во всех браузерах, включая старый IE8.
  • Иконки прекрасно сочетаются с различными фреймворками вроде Bootstrap.
  • Font Awesome включает не только шрифт, но и стилевой файл, в котором уже прописано несколько типовых решений, вроде размеров иконок, поворота, выравнивания, добавления рамки и др. Достаточно только подключить стиль и назначить элементу нужный класс.
  • Иконки можно поворачивать, анимировать и комбинировать между собой, накладывая одну иконку поверх другой. Это ещё больше расширяет возможное количество вариантов.
  • Шрифт свободен для коммерческого использования.

Недостатки

  • Символы могут быть только одного цвета. Это ограничение частично обходится объединением иконок разного цвета друг с другом, а также с помощью эффектов CSS.
  • Font Awesome как и большинство универсальных библиотек слишком избыточна, поэтому ради десятка используемых на сайте иконок придётся подключать несколько сотен. В этом случае помогает собственная сборка, когда вы включаете в шрифт только те иконки, которые вам действительно нужны.

Влад Мержевич

Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.05.2016

Редакторы: Влад Мержевич

Font Awesome Icons — CoderLessons.com

Библиотека Font Awesome icons предоставляет 519 бесплатных масштабируемых векторных иконок. Эта библиотека абсолютно бесплатна для личного и коммерческого использования. Первоначально разработанные для Bootstrap, эти значки можно легко настроить.

Загрузка библиотеки шрифтов

Чтобы загрузить библиотеку Font Awesome, скопируйте и вставьте следующую строку в раздел <head> веб-страницы.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

Использование иконки

Font Awesome предоставляет несколько иконок. Выберите один из них и добавьте имя класса значка к любому элементу HTML в теге <body>. В следующем примере мы использовали иконку индийской валюты.

Live Demo

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Это даст следующий результат —

Определение размера

Вы можете увеличивать или уменьшать размер значка, определяя его размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере мы объявили размер 6 em.

Live Demo

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Это даст следующий результат —

Определение цвета

Как и размер, вы можете определить цвет значков с помощью CSS. В следующем примере показано, как изменить цвет значка индийской валюты.

Live Demo

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Список категорий

Font Awesome предоставляет 519 иконок в следующих категориях —

  • Значки веб-приложений
  • Иконки рук
  • Транспортные иконки
  • Гендерные иконки
  • Значки типов файлов
  • Значки Spinner
  • Значки управления формой
  • Платежные иконки
  • Иконки Диаграммы
  • Иконки валют
  • Текстовый редактор Иконки
  • Направленные значки
  • Иконки видеоплеера
  • Иконки бренда

Чтобы использовать любой из этих значков, вы должны заменить имя класса в программах, приведенных в этой главе, на имя класса нужного значка. В следующих главах этого раздела (Font Awesome) мы объяснили по категориям использование и соответствующие выводы различных значков Font Awesome.

бесплатный свободный (CC BY 3.0) шрифт со значками для употребления в стиле Twitter Bootstrap / Хабр

Всякий такой веборазработчик или дизайнер сайтов, которому

когда-либо

доводилося ознакомиться со стилевою системою

Twitter Bootstrap

, уж конечно помнит, что в ней применяются

значки Glyphicons

(120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии

CC BY 3.0).

У всех этих значков, однако же, есть общий недостаток: они растровые. Соответственно, если в значке есть диагональные или криволинейные элементы, то растянуть такой значок (для крупной кнопки или для сетчаточных дисплеев) не удастся без неприятной потери качества.

Преодолеть этот недостаток намерен проект Font Awesome, нацеленный на разработку бесплатного и свободного (CC BY 3.0) шрифта, содержащего аналогичные значки не в растровой, а в векторной форме. Значки («буквы») этого шрифта легко могут принимать поэтому любой размер и любой цвет. Притом их ужé и не сто двадцать, а сто сорок.

К шрифту прилагаются стилевые файлы, позволяющие начать использование Font Awesome в Twitter Bootstrap без каких-либо особенных усилий.

Напоследок скажу ещё, что при всех его достоинствах у шрифта по сравнению с растром есть и некоторые недостатки (например, невозможность употребления полупрозрачных и полутоновых элементов рисунка, которые используются в некоторых значках Glyphicons), однако недостатки эти в Font Awesome были обойдены сравнительно сносно.

Многое при отображении шрифта будет зависеть даже не от браузера, а от операционной системы; впрочем, это касается любого шрифта, и об этом было немало прежде сказано специалистами (например, в опубликованной 15 октября 2010 года статье «Type rendering: operating systems» во блоге Typekit, снабжённой примерами да скриншотами).

При укрупнении размеров шрифта многие различия рендерингов более или менее скрадываются, и шрифт выглядит эвона как:

Начните работу с Font Awesome

Настроить Font Awesome можно так же просто, как добавить две строки кода на ваш сайт, или вы можете быть профессионалом и настройте МЕНЬШЕЕ самостоятельно! Font Awesome прекрасно работает даже с Bootstrap!

Добавьте на свой сайт Font Awesome + Bootstrap с помощью двух строк кода. Вам даже не нужно ничего скачивать или устанавливать!

  1. Вставьте следующий код в раздел HTML-кода вашего сайта.

    Хотите использовать Font Awesome без Bootstrap? Только не включайте первую строку.

  2. Похвалите себя за свои масштабируемые векторные иконки на веб-сайте решение дзюдо в двух строчках кода.
  3. Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Используйте этот метод, чтобы получить CSS Font Awesome по умолчанию с CSS Bootstrap по умолчанию.

  1. Скопируйте каталог font-awesome в свой проект.
  2. В вашего html укажите местоположение вашего font-awesome.min.css.
  3. Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Используйте этот метод для настройки Font Awesome и Bootstrap 2.3.2 с помощью LESS.

  1. Скопируйте каталог font-awesome в свой проект.
  2. Откройте файл bootstrap / bootstrap.less вашего проекта и замените с участием
      @import "путь / к / font-awesome / less / font-awesome.less";
  3. Откройте файл font-awesome / variables вашего проекта.less и отредактируйте переменную @FontAwesomePath , чтобы она указывала на каталог шрифтов.
      @FontAwesomePath: "../font";

    Путь к шрифту является относительным от вашего скомпилированного каталога CSS.

  4. Перекомпилируйте LESS, если используете статический компилятор. В противном случае все будет в порядке.
  5. Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Font Awesome работает без Bootstrap.

  1. Скопируйте каталог font-awesome в свой проект.
  2. Следуйте приведенным выше инструкциям и пропустите части Bootstrap.
  3. Откройте файл font-awesome.less или font-awesome.min.css своего проекта и отредактируйте расположение шрифта, чтобы он указывал на каталог шрифтов (см. Примеры выше).
  4. Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Font Awesome поддерживает IE7. Если вам это нужно, примите мои соболезнования.

  1. Get Font Awesome корректно работает в современном браузере.
  2. Скопируйте font-awesome-ie7.min.css в свой проект.
  3. В вашего html укажите местоположение вашего font-awesome-ie7.min.css.
  4. Жалуйтесь тому, кто решил, что вашему проекту нужна поддержка IE7.

Шпаргалка по Font Awesome

иконка (& # xf000;)

икона-музыка (& # xf001;)

значок-поиск (& # xf002;)

значок-конверт-alt (& # xf003;)

икона-сердечко (& # xf004;)

икона-звезда (& # xf005;)

значок-звезда-пустой (& # xf006;)

значок-пользователь (& # xf007;)

кинопленка (& # xf008;)

значок-й-большой (& # xf009;)

значок-й (& # xf00a;)

значок-й-список (& # xf00b;)

значок-ок (& # xf00c;)

значок-удалить (& # xf00d;)

значок-увеличение (& # xf00e;)

значок-уменьшение (& # xf010;)

значок выключен (& # xf011;)

значок-сигнал (& # xf012;)

значок-шестеренка (& # xf013;)

значок-мусор (& # xf014;)

икона-дом (& # xf015;)

значок-файл-альт (& # xf016;)

значок-время (& # xf017;)

иконная дорога (& # xf018;)

icon-download-alt (& # xf019;)

значок-скачать (& # xf01a;)

значок-загрузка (& # xf01b;)

значок входящей почты (& # xf01c;)

значок-игровой-круг (& # xf01d;)

значок-повтор (& # xf01e;)

значок-обновление (& # xf021;)

значок-список-alt (& # xf022;)

значок-замок (& # xf023;)

значок-флаг (& # xf024;)

значок-наушники (& # xf025;)

значок-громкость-выкл. (& # xf026;)

значок-громкость-вниз (& # xf027;)

значок-громкость (& # xf028;)

значок-qrcode (& # xf029;)

значок-штрих-код (& # xf02a;)

значок-тег (& # xf02b;)

значки-теги (& # xf02c;)

иконопись (& # xf02d;)

значок-закладка (& # xf02e;)

значок-печать (& # xf02f;)

значок-фотоаппарат (& # xf030;)

значок-шрифт (& # xf031;)

жирный значок (& # xf032;)

иконка курсивом (& # xf033;)

высота текста значка (& # xf034;)

ширина значка текста (& # xf035;)

значок-выравнивание-влево (& # xf036;)

значок-выравнивание-центр (& # xf037;)

значок-выравнивание-право (& # xf038;)

значок выравнивания по ширине (& # xf039;)

список значков (& # xf03a;)

значок-отступ-слева (& # xf03b;)

значок-отступ вправо (& # xf03c;)

значок-лицо-видео (& # xf03d;)

иконка (& # xf03e;)

значок-карандаш (& # xf040;)

значок-карта-маркер (& # xf041;)

значок-отрегулировать (& # xf042;)

иконка (& # xf043;)

значок-редактировать (& # xf044;)

icon-share (& # xf045;)

значок-проверка (& # xf046;)

значок-ход (& # xf047;)

значок-шаг назад (& # xf048;)

значок-быстро-назад (& # xf049;)

значок-назад (& # xf04a;)

игра с иконами (& # xf04b;)

значок-пауза (& # xf04c;)

иконка-стоп (& # xf04d;)

значок-вперед (& # xf04e;)

значок-перемотка вперед (& # xf050;)

значок-шаг вперед (& # xf051;)

значок извлечения (& # xf052;)

значок-шеврон-слева (& # xf053;)

значок-шеврон-право (& # xf054;)

значок-плюс (& # xf055;)

значок-знак минус (& # xf056;)

значок-удалить-знак (& # xf057;)

значок-ок-знак (& # xf058;)

значок-вопрос-знак (& # xf059;)

значок-информационный знак (& # xf05a;)

значок-скриншот (& # xf05b;)

значок-удалить-круг (& # xf05c;)

значок-ок-круг (& # xf05d;)

значок-запрет-круг (& # xf05e;)

значок-стрелка-влево (& # xf060;)

значок-стрелка-вправо (& # xf061;)

значок-стрелка вверх (& # xf062;)

значок-стрелка вниз (& # xf063;)

icon-share-alt (& # xf064;)

icon-resize-full (& # xf065;)

значок-размер-маленький (& # xf066;)

значок-плюс (& # xf067;)

значок-минус (& # xf068;)

значок-звездочка (& # xf069;)

восклицательный знак (& # xf06a;)

икона-подарок (& # xf06b;)

Икона-лист (& # xf06c;)

значок-огонь (& # xf06d;)

значок с открытыми глазами (& # xf06e;)

значок-глаз-закрыть (& # xf070;)

значок-предупреждающий знак (& # xf071;)

иконка самолет (& # xf072;)

значок-календарь (& # xf073;)

значок-случайный (& # xf074;)

значок-комментарий (& # xf075;)

значок-магнит (& # xf076;)

значок-шеврон (& # xf077;)

значок-шеврон-вниз (& # xf078;)

значок-ретвит (& # xf079;)

значок-корзина (& # xf07a;)

значок-папка-закрыть (& # xf07b;)

значок-папка-открыть (& # xf07c;)

значок-изменение размера-вертикальный (& # xf07d;)

значок-изменение размера-по горизонтали (& # xf07e;)

значок-гистограмма (& # xf080;)

значок-твиттер-знак (& # xf081;)

значок facebook знак (& # xf082;)

значок камеры ретро (& # xf083;)

значок-ключ (& # xf084;)

значок-шестеренки (& # xf085;)

значок-комментарии (& # xf086;)

значок-большие пальцы-вверх-alt (& # xf087;)

значок-большие пальцы-вниз-альт (& # xf088;)

значок-звезда-половина (& # xf089;)

значок-сердечко-пустой (& # xf08a;)

значок выхода (& # xf08b;)

значок-linkedin-знак (& # xf08c;)

значок-канцелярская кнопка (& # xf08d;)

значок-внешняя-ссылка (& # xf08e;)

значок-вход (& # xf090;)

икона-трофей (& # xf091;)

значок-github-знак (& # xf092;)

значок-загрузка-альт (& # xf093;)

значок-лимон (& # xf094;)

значок-телефон (& # xf095;)

значок-чек-пустой (& # xf096;)

значок-закладка-пусто (& # xf097;)

значок-телефон-знак (& # xf098;)

значок-твиттер (& # xf099;)

значок-facebook (& # xf09a;)

значок-github (& # xf09b;)

значок разблокировки (& # xf09c;)

icon-кредитная карта (& # xf09d;)

icon-rss (& # xf09e;)

значок-hdd (& # xf0a0;)

икона-мегафон (& # xf0a1;)

колокольчик (& # xf0a2;)

значок-сертификат (& # xf0a3;)

значок-рука-право (& # xf0a4;)

значок-рука-левый (& # xf0a5;)

значок руки вверх (& # xf0a6;)

значок руки вниз (& # xf0a7;)

значок-круг-стрелка-влево (& # xf0a8;)

значок-круг-стрелка-вправо (& # xf0a9;)

значок-кружок-стрелка вверх (& # xf0aa;)

значок-кружок-стрелка-вниз (& # xf0ab;)

значок-глобус (& # xf0ac;)

гаечный ключ (& # xf0ad;)

значок-задачи (& # xf0ae;)

значок-фильтр (& # xf0b0;)

иконка-портфель (& # xf0b1;)

значок-полноэкранный режим (& # xf0b2;)

группа иконок (& # xf0c0;)

значок-ссылка (& # xf0c1;)

значок-облако (& # xf0c2;)

мензурка (& # xf0c3;)

иконка (& # xf0c4;)

иконка-копия (& # xf0c5;)

значок-скрепка (& # xf0c6;)

значок сохранения (& # xf0c7;)

значок-знак-пустой (& # xf0c8;)

значок-переупорядочить (& # xf0c9;)

icon-list-ul (& # xf0ca;)

значок-список-ол (& # xf0cb;)

зачеркнутый (& # xf0cc;)

значок-подчеркивание (& # xf0cd;)

стол с иконками (& # xf0ce;)

икона-магия (& # xf0d0;)

Иконка-грузовик (& # xf0d1;)

значок-булавка (& # xf0d2;)

значок-значок (& # xf0d3;)

значок-google-плюс-знак (& # xf0d4;)

значок-google-plus (& # xf0d5;)

значок-деньги (& # xf0d6;)

значок-каретка вниз (& # xf0d7;)

иконка (& # xf0d8;)

значок-каретка-слева (& # xf0d9;)

значок-каретка-право (& # xf0da;)

иконки-столбцы (& # xf0db;)

значок-сортировка (& # xf0dc;)

значок-сортировка (& # xf0dd;)

сортировка значков (& # xf0de;)

значок-конверт (& # xf0e0;)

значок-linkedin (& # xf0e1;)

значок-отменить (& # xf0e2;)

icon-legal (& # xf0e3;)

значок-приборная панель (& # xf0e4;)

значок-комментарий-альт (& # xf0e5;)

значок-комментарии-alt (& # xf0e6;)

значок-болт (& # xf0e7;)

значок-карта сайта (& # xf0e8;)

значок-зонт (& # xf0e9;)

иконка (& # xf0ea;)

значок-лампочка (& # xf0eb;)

обмен икон (& # xf0ec;)

значок-облако-скачать (& # xf0ed;)

значок-облако-загрузка (& # xf0ee;)

значок-пользователь-мд (& # xf0f0;)

значок-стетоскоп (& # xf0f1;)

икона-чемодан (& # xf0f2;)

значок-колокольчик-альт (& # xf0f3;)

икона-кофе (& # xf0f4;)

икона-еда (& # xf0f5;)

значок-файл-текст-альт (& # xf0f6;)

иконостроительный (& # xf0f7;)

икона-госпиталь (& # xf0f8;)

значок-скорая помощь (& # xf0f9;)

икона-аптечка (& # xf0fa;)

Икона-истребитель (& # xf0fb;)

икона-пиво (& # xf0fc;)

значок-h-знак (& # xf0fd;)

значок-плюс-знак-alt (& # xf0fe;)

значок-двойной-угол-влево (& # xf100;)

значок-двойной-угол-вправо (& # xf101;)

значок-двойной угол вверх (& # xf102;)

значок-двойной угол-вниз (& # xf103;)

значок-угол-влево (& # xf104;)

значок-угол-право (& # xf105;)

значок-угол вверх (& # xf106;)

значок-угол-вниз (& # xf107;)

значок-рабочий стол (& # xf108;)

иконка-ноутбук (& # xf109;)

иконка-планшет (& # xf10a;)

значок мобильного телефона (& # xf10b;)

значок-кружок-пустой (& # xf10c;)

значок-цитата-слева (& # xf10d;)

значок-цитата-право (& # xf10e;)

прядильщик (& # xf110;)

значок-круг (& # xf111;)

значок-ответ (& # xf112;)

значок-github-alt (& # xf113;)

значок-папка-закрыть-альт (& # xf114;)

значок-папка-открыть-альт (& # xf115;)

значок-развернуть-альт (& # xf116;)

icon-collapse-alt (& # xf117;)

иконка-улыбка (& # xf118;)

хмуриться значком (& # xf119;)

Icon-Meh (& # xf11a;)

значок-геймпад (& # xf11b;)

иконка-клавиатура (& # xf11c;)

значок-флаг-альт (& # xf11d;)

клетчатый значок-флаг (& # xf11e;)

значок-терминал (& # xf120;)

значок-код (& # xf121;)

значок-ответ-все (& # xf122;)

значок-почта-ответ-все (& # xf122;)

значок-звезда-полупустой (& # xf123;)

руг значок-расположение-стрелка (& # xf124;)

иконка (& # xf125;)

значок-код-вилка (& # xf126;)

значок-отключение (& # xf127;)

значок-вопрос (& # xf128;)

значок-информация (& # xf129;)

значок-восклицательный знак (& # xf12a;)

значок-надстрочный (& # xf12b;)

значок-подстрочный (& # xf12c;)

иконка-ластик (& # xf12d;)

иконка-пазл (& # xf12e;)

значок-микрофон (& # xf130;)

значок-микрофон-выключен (& # xf131;)

значок-щит (& # xf132;)

значок-календарь-пустой (& # xf133;)

значок-огнетушитель (& # xf134;)

значок-ракета (& # xf135;)

значок-maxcdn (& # xf136;)

значок-шеврон-знак-слева (& # xf137;)

значок-шеврон-знак-право (& # xf138;)

значок-шеврон-регистрация (& # xf139;)

значок-шеврон-знак-вниз (& # xf13a;)

значок-html5 (& # xf13b;)

значок-css3 (& # xf13c;)

значок-якорь (& # xf13d;)

значок-разблокировать-alt (& # xf13e;)

значок-яблочко (& # xf140;)

значок-многоточие-горизонтальный (& # xf141;)

значок-многоточие-вертикальный (& # xf142;)

значок-RSS-знак (& # xf143;)

значок-игровой знак (& # xf144;)

значок-билет (& # xf145;)

значок-минус-знак-альт (& # xf146;)

значок-проверка-минус (& # xf147;)

повышение уровня значка (& # xf148;)

значок уровня вниз (& # xf149;)

значок-флажок (& # xf14a;)

значок-редактировать-знак (& # xf14b;)

значок-внешняя-ссылка-знак (& # xf14c;)

значок-поделиться-знак (& # xf14d;)

значок-компас (& # xf14e;)

значок-развал (& # xf150;)

значок-коллапс-верх (& # xf151;)

значок-развернуть (& # xf152;)

icon-eur (& # xf153;)

icon-gbp (& # xf154;)

значок-usd (& # xf155;)

иконка (& # xf156;)

icon-jpy (& # xf157;)

icon-cny (& # xf158;)

icon-krw (& # xf159;)

значок-btc (& # xf15a;)

icon-файл (& # xf15b;)

значок-файл-текст (& # xf15c;)

значок-сортировка по алфавиту (& # xf15d;)

значок-сортировка-по-алфавиту-альт (& # xf15e;)

значок-сортировка-по-атрибутам (& # xf160;)

значок-сортировка-по-атрибутам-alt (& # xf161;)

icon-sort-by-order (& # xf162;)

значок-сортировка-по-порядку-альт (& # xf163;)

значок-палец вверх (& # xf164;)

значок с большим пальцем вниз (& # xf165;)

значок YouTube знак (& # xf166;)

значок YouTube (& # xf167;)

icon-xing (& # xf168;)

значок-син-знак (& # xf169;)

значок YouTube Play (& # xf16a;)

значок-Dropbox (& # xf16b;)

icon-stackexchange (& # xf16c;)

значок-instagram (& # xf16d;)

icon-flickr (& # xf16e;)

icon-adn (& # xf170;)

значок-битбакет (& # xf171;)

значок-битбакет-знак (& # xf172;)

icon-tumblr (& # xf173;)

значок-тамблер-знак (& # xf174;)

значок-длинная-стрелка-вниз (& # xf175;)

значок-длинная-стрелка вверх (& # xf176;)

значок-длинная-стрелка-влево (& # xf177;)

значок-длинная-стрелка-вправо (& # xf178;)

значок-яблоко (& # xf179;)

иконки-окна (& # xf17a;)

значок-android (& # xf17b;)

значок-Linux (& # xf17c;)

иконка (& # xf17d;)

значок-скайп (& # xf17e;)

icon-foursquare (& # xf180;)

иконка-трелло (& # xf181;)

икона-женский (& # xf182;)

икона-самец (& # xf183;)

значок-gittip (& # xf184;)

значок-солнце (& # xf185;)

икона-луна (& # xf186;)

значок-архив (& # xf187;)

иконка-жук (& # xf188;)

icon-vk (& # xf189;)

значок-Weibo (& # xf18a;)

Icon-Renren (& # xf18b;)

Font Awesome Введение

Основные значки

Чтобы использовать значки Font Awesome, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Загрузка или установка не требуется!

Вы размещаете значки Font Awesome, используя префикс fa и имя значка.

Пример

Следующий код:








Результатов в:

Попробуй сам »

Font Awesome разработан для использования со встроенными элементами. и элементы широко используются для иконок.

Также обратите внимание, что если вы измените размер шрифта или цвет контейнера значка, значок изменения. То же самое и с тенью, и со всем остальным, что унаследовано с помощью CSS.

fa-lg (рост на 33%), fa-2x , fa-3x , Классы fa-4x или fa-5x используются для увеличения размеров значков относительно их контейнера.

Пример

Следующий код:





Результатов в:

Попробуй сам »

Совет: Если ваши значки обрезаются сверху и снизу, увеличьте высоту строки.

Классы fa-ul и fa-li используются для замены маркеров по умолчанию в неупорядоченных списках.

Пример

Следующий код:


  • Список значки

  • Значки списка

  • Значки списка

Результатов в:

  • Значки списка
  • Значки списка
  • Значки списка
Попробуй сам »

fa-border , fa-pull-right или fa-pull-left классы используются для цитат или значков статей.

Пример

Следующий код:


Lorem ipsum dolor sit amet, consctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.

Результатов в:

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.

Попробуй сам »

Класс fa-spin получает любой значок для вращения, а fa-pulse класс получает любой значок, который можно повернуть за 8 шагов.

Пример

Следующий код:





Результатов в:

Попробуй сам »

Примечание. IE8 и IE9 не поддерживают анимацию CSS3.

Классы fa-rotate- * и fa-flip- * используются для поворота и отражения значков.

Пример

Следующий код:






Результатов в:

Попробуй сам »

Чтобы сложить несколько значков, используйте класс fa-stack на родительском элементе fa-stack-1x класс для значка обычного размера и fa-stack-2x для значка большего размера.

Класс fa-inverse можно использовать в качестве альтернативного цвета значка. Вы также можете добавить больше Значки классов родительскому элементу для дальнейшего управления размером.

Пример

Следующий код:





fa-twitter на fa-circle-thin
fa-twitter (обратный) на fa-circle





fa-ban на fa-camera

Результатов в:

фа-твиттер на фа-круг-тонкий
fa-twitter (обратный) на fa-circle
фа-бан на фа-камеру

Попробуй сам »

Класс fa-fw используется для установки значков фиксированной ширины.Этот класс полезен, когда другой значок ширина скинуть выравнивание. Особенно полезно в навигационных списках и группах списков Bootstrap.

Пример

Попробуй сам »

Font Awesome также отлично работает со всеми компонентами Bootstrap.



Font Awesome — тема для загрузки WordPress

Эта страница содержит демонстрацию Font Awesome и примеры того, как ее использовать с этой темой.

Основные значки

fa-камера-ретро

Значки Font Awesome можно разместить где угодно, используя префикс CSS fa и имя значка. Font Awesome разработан для использования со встроенными элементами (нам нравится тег для краткости, но использование более семантически корректно).

    fa-camera-retro

Большие значки

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Чтобы увеличить размеры значков относительно их контейнера, используйте классы fa-lg (увеличение на 33%), fa-2x , fa-3x , fa-4x или fa-5x .

    fa-lg
  fa-2x
  fa-3x
  fa-4x
  fa-5x

Значки фиксированной ширины

Домашняя страница
Библиотека
Приложения
Настройки

Используйте fa-fw для установки значков фиксированной ширины.Отлично использовать, когда разная ширина значков нарушает выравнивание. Особенно полезно в таких вещах, как навигационные списки и группы списков.

Значки списка

  • Значки списка
  • можно использовать
  • как патроны
  • в списках

Используйте fa-ul и fa-li , чтобы легко заменить маркеры по умолчанию в неупорядоченных списках.

  
    
  
  •   Значки списка 
    • 
  
  •   можно использовать 
    • 
  
  •   в виде маркеров 
    • 
  
  •   в списках 
    •

Иконки с полями и вытянутыми краями

… Завтра мы побежим быстрее, дальше протянем руки… А потом в одно прекрасное утро…
Итак, мы бьем, лодки против течения, непрестанно возвращаясь в прошлое.

Используйте fa-border и fa-pull-right или fa-pull-left для удобных цитат или значков статей.

  
... завтра побежим быстрее, дальше руки вытянем ...
А потом в одно прекрасное утро & mdash; Итак, мы бьем, лодки против
текущее, непрестанно переносимое в прошлое.

Анимированные иконки

Пример загрузки (со значком fa-spinner)
Загрузка (со значком fa-circle-o-notch)
Пример загрузки (со значком fa-refresh)
Пример загрузки (со значком fa-cog)
Пример загрузки (с fa-spinner) икона)

Используйте класс fa-spin , чтобы заставить любой значок вращаться, и используйте fa-pulse , чтобы он вращался с 8 шагами.Хорошо работает с fa-spinner , fa-refresh и fa-cog .

   
 Загрузка ... 
 
 Загрузка ... 
 
 Загрузка ... 
 
 Загрузка ... 
 
 Загрузка ...

Повернутое и перевернутое

нормальный
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Для произвольного поворота и отражения значков используйте классы fa-rotate- * и fa-flip- * .

    нормальный 

  fa-rotate-90 

  fa-rotate-180 

  fa-rotate-270 

  fa-flip-horizontal 

  fa-flip-vertical

Набор иконок

fa-twitter на fa-square-o
fa-flag на fa-circle
fa-terminal на fa-square
fa-ban на fa-camera

Для наложения нескольких значков используйте класс fa-stack для родительского элемента, fa-stack-1x для значка обычного размера и fa-stack-2x для значка большего размера. fa-inverse можно использовать как альтернативный цвет значка. Вы даже можете передать родительскому элементу более крупные классы значков, чтобы получить дополнительный контроль над размером.

  
   
   

fa-twitter на fa-square-o 


   
   

флаг фа на круге фа 


   
   

фа-терминал на фа-сквер 


   
   

Фа-бан на фа-камеру

Bootstrap 4 Примеры


Удалить

Настройки


Font Awesome
Версия 4.7.0











Пользователь

Font Awesome отлично работает со всем набором компонентов Bootstrap.

  
    Удалить 

    Настройки 

    Font Awesome 
 версия 4.7.0

Пользовательский CSS

Все, что вы можете делать со стилями шрифтов CSS, вы можете делать с помощью Font Awesome.

звездных рейтинга (на основе CSS Tricks)

Ориентация на доступность

Обновление…
Сохранение. Держись!

Уровень заряда батареи: 50%

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

 

  <я aria-hidden = "true"> 


  <я aria-hidden = "true"> 


  <я aria-hidden = "true"> 

  
  
 Обновление ... 
<я aria-hidden = "true"> 
 Сохранение.Держись! 
  
  

    
  




    
  


  
  
  <я aria-hidden = "true"> 

  
  
 Уровень заряда батареи: 50%

Как использовать значки в Bootstrap

В этом руководстве вы узнаете, как включать и использовать значки Bootstrap на веб-странице.

Использование значков в Bootstrap 4

Bootstrap теперь включает более 1300 высококачественных значков, которые доступны в формате SVG, спрайтов SVG или веб-шрифтов. Вы можете использовать их с Bootstrap или без него в любом проекте.

Преимущество использования значков шрифтов в том, что вы можете создавать значки любого цвета, просто применяя свойство CSS color . Кроме того, чтобы изменить размер значков, вы можете просто использовать свойство CSS font-size .

Теперь давайте посмотрим, как включить и использовать значки Bootstrap на веб-странице.

Включение значков начальной загрузки на веб-страницу

Самый простой способ включить значки Bootstrap на веб-страницу — использовать ссылку CDN. Эта ссылка CDN в основном указывает на удаленный файл CSS, который включает все необходимые классы для создания значков шрифтов.

Вы можете включить значки Bootstrap в шаблон Bootstrap, а также на простую веб-страницу без использования среды Bootstrap.Давайте подробнее рассмотрим следующий пример:

  


    
    
     Включая значки начальной загрузки 
    
    
    
    


     
  Привет, мир!

Как использовать значки начальной загрузки в коде

Для использования значков Bootstrap в коде вам потребуется тег с примененным к нему отдельным классом значков .bi- * . Общий синтаксис для использования значков Bootstrap:

Где имя-класса — имя конкретного класса значков, например.грамм. поиск , человек , календарь , звезда , глобус , facebook , twitter и т. Д. См. Список всех классов значков Bootstrap.

Например, чтобы разместить значок поиска внутри кнопки, вы можете сделать что-то вроде этого:

— Результат приведенного выше примера будет выглядеть примерно так:

Точно так же вы можете размещать значки внутри навигации, форм, таблиц, абзацев или где угодно.В следующей главе вы увидите, как использовать эти значки в компонентах навигации Bootstrap.

Примечание: Не забудьте оставить пробел после закрывающего тега элемента значка (то есть после тега ) при использовании значков вместе со строками текста, такими как внутренние кнопки или ссылки навигации, чтобы гарантировать, что между значком и текстом есть правильный интервал.

Использование значков Font Awesome в Bootstrap

Вы также можете использовать внешние библиотеки значков в Bootstrap. Font Awesome — одна из самых популярных и хорошо совместимых внешних библиотек значков для Bootstrap. Он предоставляет более 675 значков, которые доступны в форматах SVG, PNG, а также в формате веб-шрифтов для повышения удобства использования и масштабируемости.

Вы можете просто использовать бесплатную ссылку на CDN с отличным шрифтом, чтобы включить ее в свой проект.Давайте посмотрим на следующий пример, чтобы понять, как это в основном работает:

  


    
    
     Включение значков Font Awesome в Bootstrap 
    
    
    
    


     
  Привет, мир!

Как использовать иконки Font Awesome в вашем коде

Чтобы использовать значки Font Awesome в коде, вам потребуется тег вместе с базовым классом .fa и отдельным классом значков .fa- * . Общий синтаксис для использования значков с отличным шрифтом:

Где имя-класса — имя конкретного класса значков, например.грамм. поиск , пользователь , календарь , звезда , глобус , facebook , twitter и т. Д. См. Список всех классов иконок Font Awesome.

Например, вы можете поместить значок поиска с отличным шрифтом внутри кнопки, например:

— Результат приведенного выше примера будет выглядеть примерно так:

Точно так же вы можете разместить значки Font Awesome внутри навигации, форм, таблиц, абзацев и других компонентов точно так же, как вы это делаете со значками Bootstrap.

Интеграция

Font Awesome с Bootstrap и Express

В этом руководстве мы будем интегрировать бесплатные значки Font Awesome в наше приложение Express на базе Bootstrap.

Настройка

Отправной точкой нашего кода является базовое приложение, разработанное как часть интеграции Bootstrap с упражнением Express.

Чтобы начать нашу разработку, перейдите в окно терминала и клонируйте базовое приложение экспресс-загрузки в новый каталог:

  git clone https: // github.com / regbrain / экспресс-bootstrap.git fontawesome-bootstrap-экспресс

Перейти в новый каталог:

  компакт-диск fontawesome-bootstrap-express

Установить все зависимости

  пряжа

Теперь у вас должно быть базовое приложение Express с установленным Bootstrap, готовое к дальнейшей работе по интеграции Font Awesome.

Проверьте правильность установки приложения. В окне терминала запустите приложение:

  приложение узла

В браузере перейдите по адресу: http: // localhost: 3000 / и вы должны увидеть сообщение «Bootstrap demo Hello world!» с настраиваемым цветом фона и шрифтом Zilla Slab для заголовков.

Итак, теперь мы готовы использовать мощь Sass и интегрировать Font Awesome с нашей CSS-фреймворком Bootstrap.

Установить Font Awesome

В окне терминала, если оно все еще запущено, завершите работу приложения Ctrl + c , чтобы вернуться в командную строку и установить бесплатную версию значков Font Awesome:

  пряжа add @ fortawesome / fontawesome-free

Ресурсы Font Awesome будут установлены в каталог / node_modules .

Импорт стилей в файл Sass Bootstrap

В редакторе кода откройте файл /bootstrap/style.sass . На данный момент это должно выглядеть так:

  $ body-bg: # C0C0C0

@import "../node_modules/bootstrap/scss/bootstrap"

h2, h3, h4, h5
  семейство шрифтов: 'Zilla Slab', serif
  font-weight: 700

Мы добавим серию деклараций импорта, чтобы добавить все стили Font Awesome incon:

  @import "../node_modules/@fortawesome/font-awesome-free/scss/fontawesome.scss "
@import "../node_modules/@fortawesome/font-awesome-free/scss/brands.scss"
@import "../node_modules/@fortawesome/font-awesome-free/scss/solid.scss"
@import "../node_modules/@fortawesome/font-awesome-free/scss/regular.scss"

Ваш полный style.sass теперь должен выглядеть так:

  $ body-bg: # C0C0C0

@import "../node_modules/bootstrap/scss/bootstrap"

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands.scss "
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss"
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular.scss"

h2, h3, h4, h5
  семейство шрифтов: 'Zilla Slab', serif
  font-weight: 700

Скопировать веб-шрифты в общую папку

Скопируйте папку webfonts из / node_modules / @ fortawesome / font-awesome в общую папку в основном каталоге приложения. Это позволит вашему приложению обслуживать шрифты (значки) Font Awesome в виде статических файлов с URL-адреса / webfonts вашего приложения.

Основная интеграция выполнена. Давайте протестируем несколько иконок.

Использовать иконки Font Awesome

Мы вставим несколько иконок Font Awesome в наш файл шаблона, чтобы проверить, все ли работает нормально. Откройте файл /views/index.njk . Должно получиться так:

   {{title}}
 Демонстрация начальной загрузки 
 {{ содержание }}