Fa иконки: Примеры использования Font Awesome

Содержание

Иконки FontAwesome

В MF для иконок можно использовать шрифт FontAwesome 5 и его краткий вариант IM-иконки.

Для того, чтобы иконки отображались на сайте, их нужно включить в Настройках шаблонаCSS профили. Выберите файл fontawesome5-lazy.css.

FontAwesome 5

Пятая версия FontAwesome доступна в виде нескольких файлов шрифтов. Эти шрифты содержат разные наборы иконок, поэтому первым классом иконки следует указать их принадлежность:

  • fas — solid-шрифт
  • far — reqular-шрифт
  • fab — brand-шрифт

Только после этого указывается конкретный класс иконки с префиксом fa-. FontAwesome 5 содержит примерно 1600 иконок.

<i></i>
<i></i>
<i></i>
<i></i>

Для подбора иконок вы можете воспользоваться галереей на сайте FontAwesome (версия Free).

Прочие классы для иконок

Следует понимать, что FA-иконки это не что иное, как текст, поэтому к ним применяются все те же правила, что и для обычного текста. С помощью Berry-классов можно установить цвет, размер, фон, отступы как и для текста.

<i></i>

По умолчанию для иконок добавляется правый отступ, для того, чтобы она не «прилипала» к тексту. Если отступ не нужен, то следует указать класс

icon0.

<a href="#">Комментарии</a>
<a href="#">Комментарии</a>

Если иконка должна отличаться от текущего текста html-тэга, то она формируется отдельно. Обычно для этого используется тэг I.

Скачать Скачать

<a href="#">Скачать</a>
<a href="#"><i></i>Скачать</a>

Для иконок можно создавать более сложный дизайн:

<i></i>

Форма иконки задается Berry CSS классами icon-circle, icon-square и icon-rounded:

<i></i>
<i></i>
<i></i>

Использование Font Awesome 5 с React

Введение

Font Awesome — инструментарий для сайтов, предоставляющий иконки и логотипы для социальных сетей. React — библиотека программирования, используемая для создания пользовательских интерфейсов. Хотя команда Font Awesome выпустила компонент React для поддержки интеграции, разработчикам следует знать базовые принципы работы и структуру Font Awesome 5. В этом учебном модуле вы научитесь использовать компонент React Font Awesome.

Предварительные требования

Для этого учебного модуля не потребуется писать код, но если вы захотите поэкспериментировать с некоторыми примерами, вам потребуется следующее:

Шаг 1 — Использование Font Awesome

Команда Font Awesome создала компонент React для их совместного использования. С этой библиотекой вы сможете следовать указаниям учебного модуля, выбрав свою иконку.

В этом примере мы будем использовать иконку home и сделаем все в файле App.js:

src/App.js

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Теперь в вашем приложении имеется маленькая иконка home. Обратите внимание, что в этом коде выбирается только иконка

home, так что размер нашего пакета увеличивается только на одну иконку.

Теперь Font Awesome сделает так, что этот компонент заменит себя версией SVG этой иконки после монтирования компонента.

Шаг 2 — Выбор иконок

Прежде чем устанавливать и использовать иконки, важно понимать структуру библиотек Font Awesome. Поскольку иконок много, команда решила разделить их на несколько пакетов.

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

В примере выше мы взяли иконку home из пакета @fortawesome/free-solid-svg-icons.

Определение пакета, к которому принадлежит иконка

Вы можете посмотреть фильтры слева и определить, к какому пакету принадлежит иконка. Также вы можете нажать на иконку и посмотреть, к какому пакету она принадлежит.

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

  • Сплошной стиль — fas
  • Обычный стиль — far
  • Легкий стиль — fal
  • Двухтонный стиль — fad

Вы можете использовать страницу иконок для поиска определенного типа:

Использование иконок из конкретных пакетов

При просмотре страницы иконок Font Awesome вы должны увидеть, что обычно есть несколько версий одной и той же иконки. Возьмем в качестве примера иконку boxing-glove:

Чтобы использовать определенную иконку, необходимо изменить <FontAwesomeIcon>. Далее показаны несколько типов одного значка из разных пакетов. К ним относятся сокращения из трех букв, о которых мы уже говорили.

Примечание. Следующие примеры не будут работать, пока мы не создадим библиотеку иконок с несколькими разделами.

Приведем пример сплошной версии.

<FontAwesomeIcon icon={['fas', 'code']} />

Если тип не указан, по умолчанию используется сплошная версия.

<FontAwesomeIcon icon={faCode} />

И облегченная версия с использованием fal:

<FontAwesomeIcon icon={['fal', 'code']} />;

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

Шаг 3 — Установка Font Awesome

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

Для целей этой статьи мы установим все, чтобы продемонстрировать процедуру установки нескольких пакетов.

Выполните следующую команду для установки базовых пакетов:

  1. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

Выполните следующие команды для установки обычных иконок:

  1. # regular icons
  2. npm i -S @fortawesome/free-regular-svg-icons
  3. npm i -S @fortawesome/pro-regular-svg-icons

Эти команды установят сплошные иконки:

  1. # solid icons
  2. npm i -S @fortawesome/free-solid-svg-icons
  3. npm i -S @fortawesome/pro-solid-svg-icons

Используйте эту команду для облегченных иконок:

  1. # light icons
  2. npm i -S @fortawesome/pro-light-svg-icons

Эта команда установит двухтонные иконки:

  1. # duotone icons
  2. npm i -S @fortawesome/pro-duotone-svg-icons

Наконец, эта команда установит иконки бренда:

  1. # brand icons
  2. npm i -S @fortawesome/free-brands-svg-icons

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

  1. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Если у вас имеется профессиональная учетная запись Font Awesome, вы можете использовать следующую команду для установки всех иконок:

  1. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

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

Шаг 4 — Создание библиотеки иконок

Импортировать нужную иконку в несколько файлов может быть непросто. Допустим, вы используете логотип Twitter в нескольких местах и не хотите прописывать его несколько раз.

Чтобы импортировать все в одно место, вместо импорта каждой иконки в каждый отдельный файл мы создадим библиотеку Font Awesome.

Создайте файл fontawesome.js в папке src и импортируйте его в файл index.js

. Вы можете свободно добавлять этот файл, если у компонентов, где вы хотите использовать иконки, есть к нему доступ (являются дочерними компонентами). Вы можете сделать это непосредственно в файле index.js или App.js. Однако лучше вынести его в отдельный файл, поскольку он может оказаться большим:

src/fontawesome.js

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

Если вы использовали для этого отдельный файл, нужно выполнить импорт в index.js:

src/index.js

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

Импорт пакета иконок целиком

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

Если взять этот пример, представьте, что вам нужны все иконки брендов в пакете @fortawesome/free-brands-svg-icons. Для импорта всего пакета целиком потребуется следующее:

src/fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fab отражает весь пакет иконок брендов.

Импорт иконок по отдельности

Рекомендуемый способ использовать иконки Font Awesome — импортировать их по одной так, чтобы окончательный размер комплекта был минимальным, и вы импортировали только то, что вам требуется.

Вы можете создать библиотеку из нескольких иконок из разных пакетов, например:

src/fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

Импорт одной иконки из нескольких стилей

Если вам нужны все типы иконки boxing-glove для пакетов fal, far и fas, вы можете импортировать их все под другим именем, а затем добавить их.

src/fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

Затем вы сможете использовать их, применяя разные префиксы:

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

Шаг 5 — Использование иконок

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

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

<FontAwesomeIcon icon={['fal', 'code']} />

Во втором примере можно использовать имена размеров с сокращениями для малого (sm), среднего (md), большого (lg) и очень большого (xl):

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

Третий пример предусматривает нумерацию размеров до 6:

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

При использовании нумерации размеров можно использовать десятичные дроби, чтобы подобрать идеальный размер:

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font Awesome применяет стили к используемым SVG, используя цвет текста CSS. Если вы поместите тег <p>, где будет размещена эта иконка, цвет иконки будет соответствовать цвету абзаца:

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

В Font Awesome также имеется функция power transforms, позволяющая объединить разные трансформации в одной строке:

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

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

Иконки с фиксированной шириной

В случае использования иконок в месте, где они должны быть единообразными и иметь одинаковую ширину. Font Awesome позволяет использовать опцию fixedWidth. Допустим, вам нужна фиксированная ширина для выпадающего меню навигации:

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

Вращающиеся иконки

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

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

Вы можете использовать опцию spin с чем угодно!

<FontAwesomeIcon icon={['fal', 'code']} spin />

Расширенная возможность: маскировка иконок

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

В этом примере мы создали фильтры тегов, используя маскировку:

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

Обратите внимание, что вы можете соединить цепочки опций transform так, чтобы внутренняя иконка помещалась внутри маскирующей иконки.

Мы даже можем окрасить и изменить фоновый логотип с помощью Font Awesome:

Шаг 6 — Использование

react-fontawesome и иконок вне React

Если ваш сайт не является одностраничным приложением (SPA), а вы используете традиционный сайт с добавлением React. Чтобы избежать импортирования основной библиотеки SVG/JS и библиотеки react-fontawesome, в Font Awesome имеется возможность использовать библиотеки React для слежения за иконками вне компонентов React.

Если вы используете <i></i>, мы можем использовать Font Awesome для слежения и обновления с помощью следующего кода:

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

MutationObserver — это веб-технология, позволяющая производительно отслеживать изменения DOM. Более подробную информацию об этой методике можно найти в документации по React Font Awesome.

Заключение

Font Awesome и React отлично сочетаются, но при их совместном использовании возникает необходимость использования нескольких пакетов и разнообразных комбинаций. В этом учебном модуле мы рассмотрели несколько способов совместного использования Font Awesome и React.

Font awesome: полезные приемы — dr.Brain

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

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

Иконки созданы в SVG, но нет причины беспокоиться, в данном случае Вам не нужны какие-либо знания о работе с SVG.


Содержание


Начало

Для размещения иконок Font Awesome использует следующий код:

<i></i>

В результате мы получим милую маленьку звездочку:

Стили

Для иконок Font Awesome существует четыре стиля:

  1. Solid
  2. Regular
  3. Light
  4. Duotone

При этом иконки solid практически все бесплатные. Остальные — доступны только в pro-версии.

Как это работает?

Объявление CSS-классов для тега i происходит следующим образом:

Сначала идет класс, определяющий выбранный стиль:

  1. fas для solid,
  2. far для regular,
  3. fal для light,
  4. fad для duotone.

Затем следует класс самой иконки:

  1. который всегда начинается с префикса fa-
  2. и заканчивается именем иконки.

Итак, основы использования Font Awesome оказались достаточно просты. Переходим к некоторым полезным приемам.


Приемы

Как изменить размер иконки?

Именно так, Font Awesome позволяет нам изменять размер иконки, не вмешиваясь в CSS-код, достаточно выбрать соответствующий класс для элемента:

<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>

Так будет выглядеть иконка в размере xs:

так — в размере 5x:

а так — в размере 10x:

Это просто, не правда ли?

Как сделать иконку маркером списка?

Для этого нужно:

  1. Добавить класс fa-ul для тега списка ul,
  2. Обернуть код выбранной иконки в тег span с классом fa-li и поместить в начале каждого элемента списка li.

    <ul>
    <li><span><i></i></span>Иконки Font Awesome</li>
    <li><span><i></i></span>могут</li>
    <li><span><i></i></span>заменить маркеры HTML-списка</li>
    <li><span><i></i></span>не меняя CSS</li>
    </ul>
    

А вот и результат:

  • Иконки Font Awesome
  • могут
  • заменить маркеры HTML-списка
  • не меняя CSS
Вращение иконки

Иконку можно поворачивать вокруг собственной оси, и для этого не нужно CSS-свойство transform. Достаточно добавить соответствующий класс:

<div>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

Вот что означают эти классы:

  1. fa-rotate-90 поворот на 90o по часовой стрелке,
  2. fa-rotate-180 поворот на 180o по часовой стрелке,
  3. fa-rotate-270 поворот на 270o по часовой стрелке,
  4. fa-flip-horizontal отражение по горизонтали,
  5. fa-flip-vertical отражение по вертикали,
  6. fa-flip-both отражение по горизонтали и вертикали (только для версий 5.7.0 и выше).

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

так при повороте на 180o:

а так отраженная по вертикали:

Как анимировать иконки?

Классы fa-spin и fa-pulse добавят немного динамики выбранным иконкам:

<i></i>
<i></i>

Вот пример с классом fa-spin:

а это вариант с fa-pulse:

Как объединить иконки?

Для этого нужно обернуть объединяемые иконки в родительский элемент с классом fa-stack:

<span>
  <i></i>
  <i></i>
</span>

Результат:


Внимание! Для всех приведенных ниже приемов нужна SVG версия Font Awesome


Как масштабировать иконку относительно контейнера (power transforming)?

Масштабировать иконку не изменяя контейнер можно с помощью атрибута data-fa-transform:

  1. grow-# для увеличения (# — целое число),
  2. shrink-# для уменьшения (# — целое число).

    <div>
    <i data-fa-transform="shrink-8"></i>
    <i></i>
    <i data-fa-transform="grow-6"></i>
    </div>
    

Вот что получится при уменьшении shrink-8:

Без изменений:

Вот что получится при увеличении grow-6:

Как позиционировать иконку?

Для позиционирования иконки без модификации контейнера с помощью атрибута data-fa-transform используйте свойства:

  1. up-# для смещения вверх,
  2. down-# для смещения вниз,
  3. left-# для смещения влево,
  4. right-# для смещения вправо.

где # — число, которое может содержать десятичные значения.

<div>
  <i data-fa-transform="shrink-8"></i>
  <i data-fa-transform="shrink-8 up-6"></i>
  <i data-fa-transform="shrink-8 right-6"></i>
  <i data-fa-transform="shrink-8 down-6"></i>
  <i data-fa-transform="shrink-8 left-6"></i>
</div>

Результат подобен абсолютному позиционированию в CSS.

Так будет выглядеть смещение иконки вверх относительно контейнера:

а так — смещение влево:

Как создать маску для иконки?

Это еще одна функция, позволяющая объединять две иконки в одну, но теперь с помощью атрибута data-fa-mask, в который мы помещаем классы фоновой иконки:

<div>
  <i data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
</div>

Результат:

Таким образом, мы объединили

<i></i>

с

<i></i>
Как добавить текст к иконке?

Да, поверх иконки можно что-то написать.

<span>
  <i></i>
  <span data-fa-transform="shrink-8 down-3">27</span>
</span>

<span>
  <i></i>
  <span data-fa-transform="shrink-11.5 rotate--30">NEW</span>
</span>

Для этого нужно:

  1. создать обертку span с классом fa-layers,
  2. внутри обертки добавить иконку i,
  3. после которой должен следовать элемент span с классом fa-layers-text, содержащий текст.

А вот и результат:

27

и еще:

NEW

Как к иконке добавить счетчик?

Для того чтобы добавить счетчик, последовательность действий почти такая же, как и при добавлении текста поверх иконки.

<span>
  <i></i>
  <span>1,419</span>
</span>

Нужно:

  1. создать обертку span с классом fa-layers,
  2. внутри обертки добавить иконку i,
  3. после которой должен следовать элемент span с классом fa-layers-counter.

По умолчанию счетчик находится в правом верхнем углу, но его положение можно изменить с помощью соответствующих классов:

  1. fa-layers-bottom-left внизу слева,
  2. fa-layers-bottom-right внизу справа,
  3. fa-layers-top-left вверху слева,
  4. fa-layers-top-right вверху справа (значение по умолчанию).

Результат:

1,419


Спасибо за внимание.


Перевод статьи Kiss Patrik “Font Awesome guide and useful tricks you might not know about”.

Как использовать и оформлять иконки с помощью CSS?

  1. Необходимые шаги для использования иконок
  2. Использование иконок Font Awesome
  3. Масштаб иконок Font Awesome и их цвет
  4. Использование иконок с кнопками
  5. Добавление эффекта тени к иконкам
  6. Использование иконок Font Awesome в списке
  7. Анимация иконок Font Awesome
  8. Поворот иконок Font Awesome

Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:

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

Для использования последней версии иконок this page смотрите эту страницу .

Здесь мы используем версию 5.8.1 link rel, чтобы определить связь между текущим документом и файлом со ссылкой:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Загрузка и установка не требуются.

Иконки должны быть расположены внутри элемента <body>. Найдите необходимую вам иконку и скопируйте ее HTML код.

Код иконки будет выглядеть следующим образом:

<i></i>

Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.

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

Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i>, вы можете заменить его на <span>.

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).

Используйте элемента <i> для ссылки на элемент:

<i></i>

Или используйте элемент span:

<span></span>

Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <h3>Пример иконок</h3>
    <p>Камера</p>
    <i></i>
    <p>Машина</p>
    <i></i> 
    <p>Конверт</p>
    <i></i>
  </body>
</html>
Попробуйте сами!

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span>fa-sm, fa-lg, fa-2x и др.

Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      div {
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Пример иконок с указанными размерами и цветами</h3>
    <div>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </body>
</html>
Попробуйте сами!

Смотрите детали:

Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      i {
      color: #8ebf42;
      }
      .star {
      font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h3>Пример иконок с установленными размерами шрифта и цвета</h3>
    <div>
      <p>Иконка с размером по умолчанию.</p>
      <i></i>
      <p>Font-size: 2em;</p>
      <i></i>
    </div>
  </body>
</html>
Попробуйте сами!

Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент <button>.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Кнопки с иконками</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      button {
      border: none;
      border-radius: 5px;
      color: #ffffff;
      padding: 10px 14px;
      font-size: 16px;
      cursor: pointer;
      }
      button:hover {
      background-color: #666666;
      box-shadow: 2px 4px #999999;
      }
      .btn {
      background-color: #999999;
      }
      .home {
      background-color: #ff6347;
      }
      .menu {
      background-color: #008080;
      }
      .about {
      background-color: #e6b800;
      }
    </style>
  </head>
  <body>
    <h3>Кнопки с иконками</h3>
    <p>Icon buttons:</p>
    <button>
    <i></i>
    </button>
    <button>
    <i></i>
    </button>
    <button>
    <i></i>
    </button>
    <p>Кнопки с иконками текстов и разными цветами:</p>
    <button>
    <i></i> Home
    </button>
    <button>
    <i></i> Menu
    </button>
    <button>
    <i></i> About
    </button>
  </body>
</html>
Попробуйте сами!

Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.

Установите тень для того элемента, к которому относится иконка:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Пример иконок с тенью текста</h3>
    <div> 
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </body>
</html>
Попробуйте сами!

С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.

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

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      span {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Иконки в примере со списком</h3>
    <ul>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 1
      </li>
      <li>
        <span>
        <i></i>
        </span>List item 2
      </li>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 3
      </li>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 4
      </li>
    </ul>
  </body>
</html>
Попробуйте сами!

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulseдля вращения иконки с 8 шагами. Отлично работает вместе с fa-spinner.

Будет выглядеть таким образом:

<i></i>

Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Иконки с классами fa-spin и fa-pulse</h3>
    <p>Spinner spin:</p>
    <i></i>
    <p>Spinner pulse:</p>
    <i></i>
  </body>
</html>
Попробуйте сами!

Пример с несколькими анимированными иконками:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Анимированные иконки</h3>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </body>
</html>
Попробуйте сами!

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

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

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Поворот иконок</h3>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </body>
</html>
Попробуйте сами!

Смотрите градус и детали вращения:

Иконки Awesome и CSS

Из этой статьи вы узнаете, как поместить готовую иконку на сайт с помощью иконочного шрифта Font Awesome.

Что такое Font Awesome?

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

Примеры иконок:                       …

 

1. Как подключить шрифт Awesome

Способ подключения 1

Переходим на сайт Font Awesome, и скачиваем архив со шрифтом.

Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки:
это папка css и папка fonts.

Закачиваем их на свой сервер, где расположен ваш_сайт.

Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега <link>.

Используем полную версию:

<link rel=»stylesheet» href=»http://ваш_сайт/css/font-awesome.css»>

Используем минимизированную версию:

<link rel=»stylesheet» href=»http://ваш_сайт/css/font-awesome.min.css»>

Готово! Теперь вам доступны иконки Awesome.

Способ подключения 2

Чтобы не закачивать библиотеку стилей шрифта Awesome на сервер, где расположен мой сайт, я подключаю стороннюю библиотеку сайта cdnjs.com.
Для подключения использую тег <link> , который прописывается в разделе <head>.

Скопируйте приведенный ниже код на страницу своего сайта.

<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»>

Готово! Теперь вам доступны иконки Awesome.

 

2. Как вставить иконку Font Awesome на сайт

Вариант 1
По умолчанию иконка добавляется конкретно на страницу html используя пустой тег <i> или тег <span>.

Пример 1

<i><i> или <span><span>

В результате Примера 1 получили иконку шрифта Awesome fa-tree — ёлочка:

Из примера видно, что

тег <i> обязательно включает атрибут class, который содержит
префикс fa и fa-имя иконки

Пример 2

<b><i><i><b>

Результат Примера 2:

Вариант 2
Иконки можно добавить к нужному элементу с помощью псевдоэлементов ::before, ::after и соответствующего значения свойства content.
Для этого используем тег <style>.
Прописанные стили можно перенести в общую каскадную таблицу стилей CSS своего сайта.

Пример 3

<style>
.do::before {
content: "\f015"; /* добавляем иконку дом */
font-family: FontAwesome;
color: red; /* цвет иконки */
font-size: 20px;
margin-right: 6px;
}
</style>

<b>Иконка перед текстом</b>
<span></span> это html5

Результат Примера 3: Иконка перед текстом, это html5

Пример 4

<style>
.posle::after {
content: "\f002"; /* добавляем иконку лупа */
font-family: FontAwesome;
color: green;
margin-left: 10px;
font-size: 18px; /* размер иконки */
}
</style>

<b>Иконка после текста</b>

<span>поиск</span> <i></i>

Результат Примера 4: Иконка после текста ,  Поиск

Работа со шрифтом Awesome

Что такое Font Awesome

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

В библиотеке Font Awesome версии 4.7.0 содержится 646 иконок различных тематик, которые можно задействовать как для коммерческих проектов так и личного использования абсолютно бесплатно.

1. Как подключить шрифт Awesome

Можно выделить два способа, это использование сторонних ресурсов от куда будем подгружать файл font-awesome.css и подключать шрифты через CSS или следующий способ, это скачиваем к себе архив с шрифтом Awesome и подключаем его при помощи тега <link>. Далее более подробно разберем каждый из этих способов.

Способ 1

Используем сторонние сервисы CDNJS или BootstrapCDN. Размещенный на них файл font-awesome.css мы подключаем при помощи данных строк:

Для подключения с CDNJS:

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

Для подключения с BootstrapCDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Этот код нужно добавить в раздел <head> желательно выше основного подключения style.css. После того как файл подключили, можно приступать использовать иконки на своем ресурсе.

Способ 2

Переходим на сайт Font Awesome, и скачиваем архив со шрифтом. Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки это css и папка fonts. Закачиваем их на свой сервер где расположен сайт, если есть папки с таким названием, то просто добавляем из них содержимое. Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега <link>, только теперь из папки css нашего сайта.

Используем полную версию:

<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.css">

Используем минимизированную версию:

<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.min.css">

2. Как работать с иконками Font Awesome

На веб-страницу иконки можно добавить двумя способами, первый способ это использовать соответствующий класс иконки и указать его для элемента <i></i> или <span></span>, но предварительно нужно прописать класс fa каждому из элементов.

 <i></i>

Второй способ, добавляем иконки при помощи псевдоэлементов ::before и ::after, а так же соответствующего значения свойства content для иконки. Обязательно указываем font-family: FontAwesome иначе шрифты работать не будут.

li:before {
content: "\f07a"; /* добавляем иконку корзина */
font-family: FontAwesome;
color: #aaaaaa;
margin-right: 10px; 
}
2.1. Как увеличить иконку

Что бы увеличить размер иконки достаточно в css прописать font-size и задать параметр. Так же можно увеличить размер иконки относительно его контейнера используя определенные классы fa-lg (увеличивает на 33%), fa-2x, fa-3x, fa-4x или fa-5x.

fa-lg fa-2x fa-3x fa-4x fa-5x
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
2.2. Как фиксировать ширину иконки

Для фиксирования ширины иконки используется класс fa-fw, задав его, мы фиксируем ширину тем самым можем их использовать как для навигации так и для оформление списков.

<ul>
  <li><a href="#"><i></i> Главная</a></li>
  <li><a href="#"><i></i> Карта</a></li>
  <li><a href="#"><i></i> Кабинет</a></li>
  <li><a href="#"><i></i> Настройки</a></li>
</ul>
2.3. Как маркировать списки LI иконками

Для замены стандартных маркеров в блоке <ul>…</ul> используются классы fa-ul и fa-li.

  • элемент списка
  • элемент списка
  • элемент списка
  • элемент списка
<ul>
  <li><i></i>элемент списка</li>
  <li><i></i>элемент списка</li>
  <li><i></i>элемент списка</li>
  <li><i></i>элемент списка</li>
</ul>
2.4. Кавычки для цитат обрамленные в рамке

Что бы установить рамку для иконки используем класс fa-border, а при помощи pull-right и pull-left можем добавят кавычки для текста.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.

<i></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.
<i></i>
2.5. Анимированные иконки

Что бы анимировать любую иконку достаточно добавить класс fa-spin для круговой анимации и для пульсирующей анимации fa-pulse. Так же можно использовать классы fa-spinner, fa-refresh, и fa-cog.

fa-spin fa-cog fa-spin fa-spinner fa-spin fa-refresh fa-spin fa-circle-o-notch fa-pulse fa-spinner
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
2.6. Поворачивание и отзеркаливание иконок

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

normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal fa-flip-vertical
<i></i> normal
<i></i> fa-rotate-90
<i></i> fa-rotate-180
<i></i> fa-rotate-270
<i></i> fa-flip-horizontal
<i></i> fa-flip-vertical
2.7. Группирование иконок

Иконки можно группировать накладывая их друг на друга, тем самым комбинируя их между собой. Чтобы создать группу из иконок, задаем класс для родителя fa-stack. Можно изменять размер иконки, класс fa-stack-1x задает стандартный размер, а класс fa-stack-2x для увеличения. Так же можно увеличивать при помощи классов fa-lg, fa-2x, fa-3x, fa-4x, или fa-5x.

fa-twitter на fa-square-o fa-flag на fa-circle fa-terminal на fa-square fa-ban на fa-camera
<span>
  <i></i>
  <i></i>
</span>
fa-twitter на fa-square-o<br>
<span>
  <i></i>
  <i></i>
</span>
fa-flag на fa-circle<br>
<span>
  <i></i>
  <i></i>
</span>
fa-terminal на fa-square<br>
<span>
  <i></i>
  <i></i>
</span>
fa-ban на fa-camera
2.8. Примеры использование иконок в Bootstrap 3

Иконки Awesome прекрасно работают в Bootstrap и это хорошо видно из данных примеров.

<a href="#">
  <i></i> Удалить</a>
<a href="#">
  <i></i> Настройки</a>

<a href="#">
  <i></i> Font Awesome<br>Версия 4.7.0</a>

<div>
  <a href="#">
    <i title="Align Left"></i>
  </a>
  <a href="#">
    <i title="Align Center"></i>
  </a>
  <a href="#">
    <i title="Align Right"></i>
  </a>
  <a href="#">
    <i title="Align Justify"></i>
  </a>
</div>

<div>
  <span><i></i></span>
  <input type="text" placeholder="Ваш Email">
</div>
<div>
  <span><i></i></span>
  <input type="password" placeholder="Пароль">
</div>

<div>
  <a href="#"><i></i> Пользователь</a>
  <a data-toggle="dropdown" href="#">
    <span title="Toggle dropdown menu"></span>
  </a>
  <ul>
    <li><a href="#"><i></i> Редактировать</a></li>
    <li><a href="#"><i></i> Удалить</a></li>
    <li><a href="#"><i></i> Забанить</a></li>
    <li></li>
    <li><a href="#"><i></i> Дать права администратора</a></li>
  </ul>
</div>

3. Группы иконок

В версии Font Awesome 4.7 включены новые 41 иконка. Иконки разбиты на группы для удобного отбора при помощи поиска или по навигации. У каждой иконки представлен класс и CSS код для вставки при помощи свойства content.

3.1. Иконки для веб-приложений

fa-bath\f2cd

fa-id-card\f2c2

fa-id-card-o\f2c3

fa-envelope-open\f2b6

fa-envelope-open-o\f2b7

fa-id-badge\f2c1

fa-microchip\f2db

fa-podcast\f2ce

fa-shower\f2cc

fa-snowflake-o\f2dc

fa-thermometer-full\f2c7

fa-thermometer-empty\f2cb

fa-thermometer-quarter\f2ca

fa-thermometer-half\f2c9

fa-thermometer-three-quarters\f2c8

fa-thermometer-full\f2c7

fa-user-circle\f2bd

fa-user-circle-o\f2be

fa-user-o\f2c0

fa-window-close\f2d3

fa-window-close-o\f2d4

fa-window-maximize\f2d0

fa-window-restore\f2d2

fa-window-minimize\f2d

fa-address-book\f2b9

fa-address-book-o\f2ba

fa-address-card\f2bb

fa-address-card-o\f2bc

fa-adjust\f042

fa-anchor\f13d

fa-archive\f187

fa-arrows\f047

fa-asterisk\f069

fa-at\f1fa

fa-balance-scale\f24e

fa-ban\f05e

fa-bank\f19c

fa-barcode\f02a

fa-battery-empty\f244

fa-battery-half\f242

fa-battery-quarter\f243

fa-battery-three-quarters\f241

fa-battery-full\f240

fa-bed\f236

fa-beer\f0fc

fa-bell\f0f3

fa-bell-o\f0a2

fa-bell-slash\f1f6

fa-bell-slash-o\f1f7

fa-binoculars\f1e5

fa-birthday-cake\f1fd

fa-bolt\f0e7

fa-bomb\f1e2

fa-book\f02d

fa-bookmark\f02e

fa-bookmark-o\f097

fa-briefcase\f0b1

fa-bug\f188

fa-building\f1ad

fa-building-o\f0f7

fa-bullhorn\f0a1

fa-bullseye\f140

fa-calculator\f1ec

fa-calendar\f073

fa-calendar-check-o\f274

fa-calendar-minus-o\f272

fa-calendar-o\f133

fa-calendar-plus-o\f271

fa-calendar-times-o\f273

fa-cart-plus\f217

fa-cc\f20a

fa-certificate\f0a3

fa-clock-o\f017

fa-clone \f24d

fa-close\f00d

fa-cloud\f0c2

fa-cloud-download\f0ed

fa-cloud-upload\f0ee

fa-code\f121

fa-code-fork\f126

fa-coffee\f0f4

fa-comment\f075

fa-comment-o\f0e5

fa-commenting\f27a

fa-commenting-o\f27b

fa-comments\f086

fa-comments-o\f0e6

fa-compass\f14e

fa-copyright\f1f9

fa-creative-commons\f25e

fa-crop\f125

fa-crosshairs\f05b

fa-cube\f1b2

fa-cubes\f1b3

fa-cutlery\f0f5

fa-dashboard\f0e4

fa-database\f1c0

fa-desktop\f108

fa-diamond\f219

fa-download\f019

fa-edit\f044

fa-ellipsis-h\f141

fa-ellipsis-v\f142

fa-envelope\f0e0

fa-envelope-o\f003

fa-envelope-square\f199

fa-exclamation\f12a

fa-exclamation-circle\f06a

fa-exclamation-triangle\f071

fa-external-link\f08e

fa-external-link-square\f14c

fa-eye\f06e

fa-eye-slash\f070

fa-eyedropper\f1fb

fa-fax\f1ac

fa-film\f008

fa-filter\f0b0

fa-fire\f06d

fa-fire-extinguisher\f134

fa-flag\f024

fa-flag-checkered\f11e

fa-flag-o\f11d

fa-flash\f0e7

fa-flask\f0c3

fa-frown-o\f119

fa-futbol-o\f1e3

fa-gear\f013

fa-gears\f085

fa-gift\f06b

fa-glass\f000

fa-globe\f0ac

fa-graduation-cap\f19d

fa-group\f0c0

fa-hashtag\f292

fa-heart\f004

fa-heart-o\f08a

fa-heartbeat\f21e

fa-h-square\f0fd

fa-history\f1da

fa-home\f015

fa-hospital-o\f0f8

fa-hourglass\f254

fa-hourglass-start\f251

fa-hourglass-half\f252

fa-hourglass-end\f253

fa-hourglass-o\f250

fa-i-cursor\f246

fa-inbox\f01c

fa-industry\f275

fa-info\f129

fa-info-circle\f05a

fa-key\f084

fa-language\f1ab

fa-leaf\f06c

fa-legal\f0e3

fa-lemon-o\f094

fa-lightbulb-o\f0eb

fa-location-arrow\f124

fa-lock\f023

fa-magic\f0d0

fa-magnet\f076

fa-map\f279

fa-map-marker\f041

fa-map-o\f278

fa-map-pin\f276

fa-map-signs\f277

fa-medkit\f0fa

fa-meh-o\f11a

fa-microphone\f130

fa-microphone-slash\f131

fa-moon-o\f186

fa-mouse-pointer\f245

fa-music\f001

fa-navicon\f0c9

fa-newspaper-o\f1ea

fa-object-group\f247

fa-object-ungroup\f248

fa-paint-brush\f1fc

fa-paper-plane\f1d8

fa-paper-plane-o\f1d9

fa-paw\f1b0

fa-pencil\f040

fa-pencil-square\f14b

fa-pencil-square-o\f044

fa-percent\f295

fa-phone\f095

fa-phone-square\f098

fa-plug\f1e6

fa-power-off\xf011

fa-print\f02f

fa-puzzle-piece\f12e

fa-qrcode\f029

fa-question\f128

fa-question-circle\f059

fa-quote-left\f10d

fa-quote-right\f10e

fa-recycle\f1b8

fa-refresh\f021

fa-registered\f25d

fa-reply\f112

fa-reply-all\f122

fa-retweet\f079

fa-road\f018

fa-rss\f09e

fa-rss-square\f143

fa-search\f002

fa-search-minus\f010

fa-search-plus\f00e

fa-send\f1d8

fa-send-o\f1d9

fa-server\f233

fa-share\f064

fa-share-square\f14d

fa-share-square-o\f045

fa-shield\f132

fa-shopping-bag\f290

fa-shopping-basket\f291

fa-shopping-cart\f07a

fa-sign-in\f090

fa-sign-out\f08b

fa-signal\f012

fa-sitemap\f0e8

fa-sliders\xf1de

fa-smile-o\xf118

fa-soccer-ball-o\f1e3

fa-sort\f0dc

fa-sort-alpha-asc\f15d

fa-sort-alpha-desc\f15e

fa-sort-amount-asc\f160

fa-sort-amount-desc\f161

fa-sort-asc\f0de

fa-sort-desc\f0dd

fa-sort-numeric-asc\f162

fa-sort-numeric-desc\f163

fa-spoon\f1b1

fa-star\f005

fa-star-half\f089

fa-star-half-o\f123

fa-star-o\f006

fa-street-view\f21d

fa-suitcase\f0f2

fa-sun-o\f185

fa-support\f1cd

fa-tachometer\f0e4

fa-tag\f02b

fa-tags\f02c

fa-tasks\f0ae

fa-terminal\f120

fa-thumb-tack\f08d

fa-ticket\f145

fa-tint\f043

fa-trademark\f25c

fa-trash\f1f8

fa-trash-o\f014

fa-tree\f1bb

fa-trophy\f091

fa-tty\f1e4

fa-umbrella\f0e9

fa-unlock\f09c

fa-unlock-alt\f13e

fa-unsorted\f0dc

fa-upload\f093

fa-user\f007

fa-user-plus\xf234

fa-user-secret\f21b

fa-user-times\f235

fa-user-md\f0f0

fa-volume-down\f027

fa-volume-off\f026

fa-volume-up\f028

fa-warning\f071

fa-wifi\f1eb

fa-wrench\f0ad

3.2. Иконки для людей с ограниченными возможностями

fa-american-sign-language-interpreting\f2a3

fa-assistive-listening-systems\f2a2

fa-audio-description\f29e

fa-blind\f29d

fa-braille\f2a1

fa-deaf\f2a4

fa-low-vision\f2a8

fa-question-circle-o\f29c

fa-sign-language\f2a7

fa-tty\f1e4

fa-universal-access\f29a

fa-volume-control-phone\f2a0

fa-wheelchair\f193

fa-wheelchair-alt\f29b

3.3. Иконки рука

fa-hand-grab-o\f255

fa-hand-lizard-o\f258

fa-hand-paper-o\f256

fa-hand-peace-o\f25b

fa-hand-pointer-o\f25a

fa-hand-scissors-o\f257

fa-hand-spock-o\xf259

fa-hand-o-down\f0a7

fa-hand-o-left\f0a5

fa-hand-o-right\f0a4

fa-hand-o-up\f0a6

fa-thumbs-down\f165

fa-thumbs-o-down\f088

fa-thumbs-o-up\f087

fa-thumbs-up\f164

fa-handshake-o\f2b5

3.4. Иконки для форм

fa-check-square\f14a

fa-check-square-o\f046

fa-circle\f111

fa-circle-o\f10c

fa-dot-circle-o\f192

fa-minus-square\f146

fa-minus-square-o\f147

fa-plus-square\f0fe

fa-plus-square-o\f196

fa-square\f0c8

fa-square-o\f096

3.5. Иконки для гаджетов

fa-mobile\f10b

fa-tablet\f10a

fa-television\f26c

fa-video-camera\f03d

fa-camera\f030

fa-camera-retro\f083

fa-hdd-o\f0a0

fa-headphones\f025

fa-laptop\f109

fa-gamepad\f11b

fa-keyboard-o\f11c

3.6. Иконки транспорт

fa-ambulance\f0f9

fa-bicycle\f206

fa-bus\f207

fa-car\f1b9

fa-fighter-jet\f0fb

fa-motorcycle\f21c

fa-plane\f072

fa-rocket\f135

fa-ship\f21a

fa-space-shuttle\f197

fa-subway\f239

fa-taxi\f1ba

fa-train\f238

fa-truck\f0d1

fa-wheelchair\f193

fa-wheelchair-alt\f29b

3.7. Гендерные иконки

fa-child\f1ae

fa-female\f182

fa-male\f183

fa-genderless\f1db

fa-transgender\f224

fa-transgender-alt\f225

fa-mars\f222

fa-mars-double\f227

fa-mars-stroke\f229

fa-mars-stroke-h\f22b

fa-mars-stroke-v\f22a

fa-mercury\f223

fa-neuter\f22c

fa-venus\f221

fa-venus-double\f226

fa-venus-mars\f228

3.8. Файловые иконки

fa-folder\f07b

fa-folder-o\f114

fa-folder-open\f07c

fa-folder-open-o\f115

fa-file\f15b

fa-file-o\f016

fa-file-archive-o\f1c6

fa-file-audio-o\f1c7

fa-file-code-o\f1c9

fa-file-excel-o\f1c3

fa-file-image-o\f1c5

fa-file-movie-o\f1c8

fa-file-pdf-o\f1c1

fa-file-photo-o\xf1c5

fa-file-powerpoint-o\f1c4

fa-file-sound-o\f1c7

fa-file-video-o\f1c8

fa-file-word-o\f1c2

fa-file-zip-o\f1c6

fa-file-text\f15c

fa-file-text-o\f0f6

fa-files-o\f0c5

fa-image\f03e

fa-sticky-note\f249

fa-sticky-note-o\f24a

3.9. Иконки валют

fa-btc\f15a

fa-usd\f155

fa-euro\f153

fa-gbp\f154

fa-yen\f157

fa-money\f0d6

fa-ruble\f158

fa-rupee\f156

fa-shekel\f20b

fa-turkish-lira\f195

fa-won\f159

fa-gg\f260

3.10. Иконки управляющих символов

fa-check\f00c

fa-check-circle\f058

fa-check-circle-o\f05d

fa-circle-thin\f1db

fa-check-square\f14a

fa-check-square-o\f046

fa-circle\f111

fa-circle-o\f10c

fa-dot-circle-o\f192

fa-minus-square\f146

fa-minus-square-o\f147

fa-plus-square\f0fe

fa-plus-square-o\f196

fa-minus\f068

fa-minus-circle\f056

fa-square\f0c8

fa-square-o\f096

fa-plus\f067

fa-plus-circle\f055

fa-times-circle\f057

fa-times-circle-o\f05c

3.11. Иконки платежных систем

fa-cc-amex\f1f3

fa-cc-diners-club\f24c

fa-cc-discover\f1f2

fa-cc-jcb\f24b

fa-cc-mastercard\f1f1

fa-cc-paypal\f1f4

fa-cc-stripe\f1f5

fa-cc-visa\f1f0

fa-credit-card\f09d

fa-credit-card-alt\f283

fa-google-wallet\f1ee

fa-paypal\f1ed

3.12. Иконки социальных сетей и сообществ

fa-codepen\f1cb

fa-telegram\f2c6

fa-behance\f1b4

fa-behance-square\f1b5

fa-deviantart\f1bd

fa-whatsapp\f232

fa-digg\f1a6

fa-dribbble\f17d

fa-facebook\f09a

fa-facebook-official\f230

fa-facebook-square\f082

fa-google-plus\f0d5

fa-google-plus-square\f0d4

fa-jsfiddle\f1cc

fa-flickr\f16e

fa-instagram\f16d

fa-github\f09b

fa-github-alt\f113

fa-github-square\f092

fa-linkedin\f0e1

fa-linkedin-square\f08c

fa-odnoklassniki\f263

fa-odnoklassniki-square\f264

fa-pinterest\f0d2

fa-pinterest-p\f231

fa-pinterest-square\f0d3

fa-stack-overflow\f16c

fa-yelp\f1e9

fa-tumblr\f173

fa-tumblr-square\f174

fa-twitter\f099

fa-twitter-square\f081

fa-vk\f189

fa-youtube-square\f166

fa-youtube\f167

3.13. Иконки редактирования текста

fa-align-center\f037

fa-align-justify\f039

fa-align-left\f036

fa-align-right\f038

fa-bold\f032

fa-chain\f0c1

fa-chain-broken\f127

fa-clipboard\f0ea

fa-columns\f0db

fa-copy\f0c5

fa-cut\f0c4

fa-dedent\f03b

fa-eraser\f12d

fa-floppy-o\f0c7

fa-font\f031

fa-header\f1dc

fa-indent\f03c

fa-italic\f033

fa-list\f03a

fa-list-alt\f022

fa-list-ol\f0cb

fa-list-ul\f0ca

fa-outdent\f03b

fa-paperclip\f0c6

fa-paragraph\f1dd

fa-paste\f0ea

fa-repeat\f01e

fa-rotate-left\f0e2

fa-rotate-right\f01e

fa-save\f0c7

fa-strikethrough\f0cc

fa-subscript\f12c

fa-superscript\f12b

fa-table\f0ce

fa-text-height\f034

fa-text-width\f035

fa-th\f00a

fa-th-large\f009

fa-th-list\f00b

fa-underline\f0cd

3.14. Иконки направления

fa-level-down\f149

fa-level-up\f148

fa-angle-double-down\f103

fa-angle-double-left\f100

fa-angle-double-right\f101

fa-angle-double-up\f102

fa-angle-down\f107

fa-angle-left\f104

fa-angle-right\f105

fa-angle-up\f106

fa-arrow-circle-down\f0ab

fa-arrow-circle-left\f0a8

fa-arrow-circle-right\f0a9

fa-arrow-circle-up\f0aa

fa-arrow-circle-o-down\f01a

fa-arrow-circle-o-left\f190

fa-arrow-circle-o-right\f18e

fa-arrow-circle-o-up\f01b

fa-arrow-down\f063

fa-arrow-left\f060

fa-arrow-right\f061

fa-arrow-up\f062

fa-arrows-h\f07e

fa-arrows-v\f07d

fa-caret-down\f0d7

fa-caret-left\f0d9

fa-caret-right\f0da

fa-caret-up\f0d8

fa-caret-square-o-down\f150

fa-caret-square-o-left\f191

fa-caret-square-o-right\f152

fa-caret-square-o-up\f151

fa-cart-arrow-down\f218

fa-chevron-circle-down\f13a

fa-chevron-circle-left\f137

fa-chevron-circle-right\f138

fa-chevron-circle-up\f139

fa-chevron-down\f078

fa-chevron-left\f053

fa-chevron-right\f054

fa-chevron-up\f077

fa-exchange\f0ec

fa-long-arrow-down\f175

fa-long-arrow-left\f177

fa-long-arrow-right\f178

fa-long-arrow-up\f176

fa-toggle-down\f150

fa-toggle-left\f191

fa-toggle-right\f152

fa-toggle-up\f151

fa-toggle-off\f204

fa-toggle-on\f205

3.15. Иконки видео плеера

fa-arrows-alt\f0b2

fa-backward\f04a

fa-forward\f04e

fa-compress\f066

fa-eject\f052

fa-expand\f065

fa-fast-backward\f049

fa-fast-forward\f050

fa-pause\f04c

fa-pause-circle\f28b

fa-pause-circle-o\f28c

fa-play\f04b

fa-play-circle\f144

fa-play-circle-o\f01d

fa-random\f074

fa-step-backward\f048

fa-step-forward\f051

fa-stop\f04d

fa-stop-circle\f28d

fa-stop-circle-o\f28e

fa-youtube-play\f16a

3.16. Брендовые иконки

fa-bandcamp\f2d5

fa-eercast\f2da

fa-etsy\f2d7

fa-free-code-camp\f2c5

fa-grav\f2d6

fa-imdb\f2d8

fa-linode\f2b8

fa-meetup\f2e0

fa-quora\f2c4

fa-ravelry\f2d9

fa-superpowers\f2dd

fa-wpexplorer\f2de

fa-500px\f26e

fa-adn\f170

fa-amazon\f270

fa-android\f17b

fa-angellist\f209

fa-apple\f179

fa-bitbucket\f171

fa-bitbucket-square\f172

fa-black-tie\f27e

fa-bluetooth\f293

fa-bluetooth-b\f294

fa-buysellads\f20d

fa-chrome\f268

fa-css3\f13c

fa-connectdevelop\f20e

fa-dashcube\f210

fa-delicious\f1a5

fa-dropbox\f16b

fa-drupal\f1a9

fa-edge\f282

fa-empire\f1d1

fa-expeditedssl\f23e

fa-firefox\f269

fa-fonticons\f280

fa-fort-awesome\f286

fa-forumbee\f211

fa-foursquare\f180

fa-ge\f1d1

fa-get-pocket\f265

fa-git\f1d3

fa-git-square\f1d2

fa-gg\f260

fa-gg-circle\f261

fa-google\f1a0

fa-gratipay\f184

fa-hacker-news\f1d4

fa-houzz\f27c

fa-html5\f13b

fa-ioxhost\f208

fa-joomla\f1aa

fa-lastfm\f202

fa-lastfm-square\f203

fa-leanpub\f212

fa-linux\f17c

fa-maxcdn\f136

fa-meanpath\f20c

fa-medium\f23a

fa-mixcloud\f289

fa-modx\f285

fa-opencart\f23d

fa-openid\f19b

fa-opera\f26a

fa-optin-monster\f23c

fa-pagelines\f18c

fa-pied-piper\f1a7

fa-pied-piper-alt\f1a8

fa-product-hunt\f288

fa-qq\f1d6

fa-rebel\f1d0

fa-reddit\f1a1

fa-reddit-square\f1a2

fa-renren\f18b

fa-safari\f267

fa-scribd\f28a

fa-sellsy\f213

fa-share-alt\f1e0

fa-share-alt-square\f1e1

fa-shirtsinbulk\f214

fa-simplybuilt\f215

fa-skyatlas\f216

fa-skype\f17e

fa-slack\f198

fa-slideshare\f1e7

fa-soundcloud\f1be

fa-spotify\f1bc

fa-stack-exchange\f18d

fa-steam\f1b6

fa-steam-square\f1b7

fa-stethoscope\f0f1

fa-stumbleupon\f1a4

fa-stumbleupon-circle\f1a3

fa-tencent-weibo\f1d5

fa-trello\f181

fa-tripadvisor\f262

fa-usb\f287

fa-viacoin\f237

fa-vimeo\f27d

fa-vimeo-square\f194

fa-vine\f1ca

fa-wechat\f1d7

fa-weibo\f18a

fa-wikipedia-w\f266

fa-windows\f17a

fa-wordpress \f19a

fa-xing\f168

fa-xing-square\f169

fa-y-combinator\f23b

fa-yahoo\f19e

3.17. Иконки диаграмм

fa-area-chart\f1fe

fa-bar-chart\f080

fa-line-chart\f201

fa-pie-chart\f200

3.18. Вращающиеся иконки

fa-circle-o-notch\f1ce

fa-spinner\f110

fa-gear\f013

fa-spinner\f110

fa-refresh\f021

4. Похожие ресурсы

По мимо сервиса Font Awesome мы можем использовать другие ресурсы, для примера перечислю их ниже.

4.1. IcoMoon

IcoMoon — один из популярных иконочных шрифтов. На данном сервисе представлено три пакета, более детально с ними можете ознакомиться тут. От выбранного пакета будет зависеть формат и качество иконок. Так же IcoMoon представляет онлайн приложение в котором можно менять цвет, поворот и много другое, но самый большой плюс можно выделить в том что позволяет импортировать свои иконки и создавать иконочные шрифты.

4.2. Material icons

Material icons — сервис представляет плоские иконки от Google. Иконки красиво отображаются на всех платформах и работают на любых разрешений экрана.

Коллекция содержит в себе более 750 иконок и легко внедряется на сайт при помощи тега link, для отображения иконок в браузере используется иконочный шрифт Material Icons.

Сами иконки добавляются при помощи i с классом material-icons или при помощи html кода иконки.

4.3. Fontello

На сервисе Fontello представлен большой выбор иконочных шрифтов. Также представлена возможность отбора иконок и загрузка их на свой компьютер.

4.4. Foundation Icon

Foundation Icon — уникальная коллекция иконочных шрифтов от разработчиков фреймворка Foundation. Уникальность их в том что тут представлены по мимо стандартных иконок есть круглые, так же иконки брендов и социальных сетей.

1 предыдущая статья

Хаки и Скрипты Next Generation CMS : Онлайн сервисы, Разное : Плюшки для FontAwesome

  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Что такое FontAwesome?


Font Awesome — это набор масштабируемых векторных иконок. Основной плюс и удобство этого набора — возможность лёгкой персонализации. Любой иконке Вы можете задать свой размер, цвет, тени и все, что делается силами CSS. К тому же это абсолютно бесплатно

Как установить FontAwesome?

Для установки на ваш сайт набора иконок Font Awesome нужно выполнить несколько несложных шагов:
  • Скачать дистрибутив с сайта fontawesome.io.
  • Распаковать архив и скопировать папку «font-awesome», например, в корень вашего сайта, туда где лежит файл index.
  • Подключить файлы в <head> Вашего сайта. Перед закрывающимся тегом </head> поместить строчку: <link rel=»stylesheet» href=»/font-awesome/css/font-awesome.css»>. Не забудьте изменить путь, если скопировали папку с шрифтами в другое место.
На этом установка пакета иконок Font Awesome закончена.

Как пользоваться FontAwesome?

Для вставки иконки на сайт идём сайт fontawesome.io/all-icons/, выбираем нужную иконку и копируем её тег . Например, для иконки anchor тег <i></i>

Вставляем тег в нужное место и получаем:

Стили

Для иконок Font Awesome существует четыре стиля:
  1. Solid
  2. Regular
  3. Light
  4. Duotone
При этом иконки solid практически все бесплатные. Остальные — доступны только в pro-версии.

Как это работает?Объявление CSS-классов для тега

i происходит следующим образом:
Сначала идет класс, определяющий выбранный стиль:
  1. fas для solid,
  2. far для regular,
  3. fal для light,
  4. fad для duotone.
Затем следует класс самой иконки:
  1. который всегда начинается с префикса fa-
  2. и заканчивается именем иконки.

Изменяем размер font awesome icons

Для изменения размера пользуемся одним из дополнительных тегов: fa-5x, fa-4x, fa-3x, fa-2x, fa-lg.
Например:

Код:

<i></i>
<i></i>
<i></i>
<i></i>
<i></i>

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

Поворачиваем font awesome icons

Иконку можно поворачивать вокруг собственной оси, и для этого не нужно CSS-свойство transform. Достаточно добавить соответствующий класс:

Код:

<div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
Вот что означают эти классы:
  1. fa-rotate-90 поворот на 90o по часовой стрелке,
  2. fa-rotate-180 поворот на 180o по часовой стрелке,
  3. fa-rotate-270 поворот на 270o по часовой стрелке,
  4. fa-flip-horizontal отражение по горизонтали,
  5. fa-flip-vertical отражение по вертикали,
  6. fa-flip-both отражение по горизонтали и вертикали (только для версий 5.7.0 и выше).

Как объединить иконки?

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

Код:

<span>
<i></i>
<i></i>
</span>

Результат:


Как изменить цвет у иконки font awesome

Для того чтобы изменить цвет иконки можно дописать внутри тега <i> свойство style. Либо положить иконку в один из тегов: <span>, <p>, <div>, с присвоенным классом стилей из файла styles.css.

Код:

<i></i>

Результат :

Если вы хотите сделать из иконки ссылку, то просто поместите её в тег <a>.
Пример :

Код:

<a href="https://ngcmshak.ru/onlain-servisy-raznoe/plyushki-dlya-fontawesome.html#"<i></i></a>

Как сделать иконку маркером списка?

Для этого нужно:
  1. Добавить класс fa-ul для тега списка ul,
  2. Обернуть код выбранной иконки в тег span с классом fa-li и поместить в начале каждого элемента списка li

    Код:

    <ul>
    <li><span><i></i></span>Иконки Font Awesome</li>
    <li><span><i></i></span>могут</li>
    <li><span><i></i></span>заменить маркеры HTML-списка</li>
    <li><span><i></i></span>не меняя CSS</li>
    </ul>
Результат:
  • Иконки Font Awesome
  • могут
  • заменить маркеры HTML-списка
  • не меняя CSS

Как анимировать иконки?

Классы fa-spin иfa-pulse добавят немного динамики выбранным иконкам:

Код:

<i></i>
<i></i>
Результат с fa-spin:

Результат с fa-pulse:

Внимание! Для всех приведенных ниже приемов нужна SVG версия Font Awesome

Как масштабировать иконку относительно контейнера (power transforming)?

Масштабировать иконку не изменяя контейнер можно с помощью атрибута data-fa-transform:
  1. grow-# для увеличения (# — целое число),
  2. shrink-# для уменьшения (# — целое число).
Пример

Код:

<div>
<i data-fa-transform="shrink-8"></i>
<i></i>
<i data-fa-transform="grow-6"></i>
</div>

Вот что получится при уменьшении shrink-8:

Без изменений:

Вот что получится при увеличении grow-6:

Как позиционировать иконку?

Для позиционирования иконки без модификации контейнера с помощью атрибута data-fa-transform используйте свойства:
  1. up-# для смещения вверх,
  2. down-# для смещения вниз,
  3. left-# для смещения влево,
  4. right-# для смещения вправо.
где # — число, которое может содержать десятичные значения.

Код:

<div>
<i data-fa-transform="shrink-8"></i>
<i data-fa-transform="shrink-8 up-6"></i>
<i data-fa-transform="shrink-8 right-6"></i>
<i data-fa-transform="shrink-8 down-6"></i>
<i data-fa-transform="shrink-8 left-6"></i>
</div>
Результат подобен абсолютному позиционированию в CSS.

Так будет выглядеть смещение иконки вверх относительно контейнера:


а так — смещение влево:

Как создать маску для иконки?

Это еще одна функция, позволяющая объединять две иконки в одну, но теперь с помощью атрибута
data-fa-mask, в который мы помещаем классы фоновой иконки:

Код:

<div>
<i data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
</div>
Результат:

Таким образом, мы объединили <i> с <iclass=»fas fa-pencil-alt»></i>

Как добавить текст к иконке?

Да, поверх иконки можно что-то написать.

Код:

<span>
<i></i>
<span data-fa-transform="shrink-8 down-3">27</span>
</span>

<span>
<i></i>
<span data-fa-transform="shrink-11.5 rotate--30">NEW</span>
</span>


Для этого нужно:
  1. создать обертку span с классомfa-layers,
  2. внутри обертки добавить иконку i,
  3. после которой должен следовать элемент span с классом fa-layers-text, содержащий текст.
Результат:
27
и еще:
NEW

Как к иконке добавить счетчик?

Для того чтобы добавить счетчик, последовательность действий почти такая же, как и при добавлении текста поверх иконки.

Код:

<span>
<i></i>
<span>1,419</span>
</span>

Нужно:
  1. создать обертку span с классом fa-layers,
  2. внутри обертки добавить иконку i,
  3. после которой должен следовать элемент span с классом fa-layers-counter.
По умолчанию счетчик находится в правом верхнем углу, но его положение можно изменить с помощью соответствующих классов:
  1. fa-layers-bottom-left внизу слева,
  2. fa-layers-bottom-right внизу справа,
  3. fa-layers-top-left вверху слева,
  4. fa-layers-top-right вверху справа (значение по умолчанию).
Результат:
1,419

Можешь почитать и вот эту статейку «Подключение визуального редактора CKeditor на NGcms»

ПредыдущаяСледующая

Это тоже интересно

Font Awesome 5 Intro


Потрясающий шрифт 5

Font Awesome 5 имеет версию PRO с 7842 иконками и БЕСПЛАТНУЮ версию с 1588 иконками. В этом руководстве основное внимание будет уделено БЕСПЛАТНОЙ версии.

Чтобы использовать значки Free Font Awesome 5, вы можете загрузить шрифт Потрясающая библиотека, или вы можете зарегистрировать учетную запись в Font Awesome и получить код (называемый KIT CODE) для использования при добавлении Font Awesome на веб-страницу.

Мы предпочитаем подход KIT CODE.Как только вы получите код, вы можете начать использовать Font Awesome на ваших веб-страницах, включив только одну строку HTML-кода:

Пример

Получили код a076d05399 и вставив тег script, с кодом, мы можем начать использовать Font Awesome:






Результат:

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

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


Получите свой собственный КОД КОД

Зарегистрируйтесь и получите свой собственный код бесплатно по адресу:

потрясающий.ком

Новое в Font Awesome 5

Новым в Font Awesome 5 является префикс fas , Font Awesome 4 использует fa .

с в fas означает сплошной , а некоторые значки также имеют обычный режим , указывается с использованием префикса far :

Пример


Результат:

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

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

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

Пример


Результат:

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

факс , фа-см , фа-лг , фа-2х , фа-3х , фа-4х , фа-5х , фа-6х , фа-7х , фа-8х , фа-9х , или классы fa-10x используются для настройки размеров значков относительно их контейнера.

Пример

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







Результат:

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

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

Пример

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


     
  • Список Элемент

  •  
  • Список Элемент

  •  
  • Список Товар

Результат:

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

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

Пример

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






Результат:

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

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


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

Пример

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






Результат:

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

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

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

Пример

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


 
 

fa-twitter (инверсия) на fa-circle (сплошной)


 
 

fa-twitter на fa-circle (обычный)


 
 

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

Результат:

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

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

Класс fa-fw используется для установки значков в фиксированная ширина.

Пример

Фиксированная ширина:

Значок 1

Значок 2

Пиктограмма 3

Без фиксации Ширина:


Значок 1

Значок 2

Значок 3

Результат:


Попробуйте сами »

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

Пример

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


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Результат:

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

Иконки Font Awesome | Список значков Fa Fa, Получите все последние бесплатные значки Fontawesome

Что такое значки Font Awesome? | Fa Fa Icons

Fa Fa Icons используются для веб-разработки.Приложение IOS/Android использует соответствующие значки Фа Фа. Fontawesome Icon — очень легко реализуемая библиотека веб-приложений. Код значков Font Awesome имеет силу магических лигатур, которые превращают этот текст в значок. Эти значки Фа Фа очень настраиваемые, которые можно изменить в соответствии с нашими потребностями. Выше перечислены более 2000 уникальных значков Фа Фа. Эти значки создадут отличный пользовательский интерфейс (UI), когда пользователи взаимодействуют с веб-приложениями или веб-сайтом. Компоненты списка значков шрифтов помогают пользователям легко узнать о действенных идеях.Стратегическое использование цвета, типографики и значков Fa — некоторые из лучших практик для разработки интерактивного интерфейса. Значки Font Awesome (Fa-Fa) облегчают работу пользователей и делают их быстрее. Макет страницы также значительно улучшается после добавления правильных элементов пользовательского интерфейса.

Давайте сначала разберемся, что такое значки. Значки в основном используются в качестве символов на веб-сайте / в приложении. Просто подумайте, путешествуя по дороге, мы видим символы, которые предоставляют нам важную информацию, например, есть разворот, левый поворот или правый поворот.Так что все эти символы помогают нам в путешествии. Точно так же очень важно получать ключевую информацию через символы. Базовым тестом значка является значок поиска на кнопке поиска Google, который дает пользователю подсказку о назначении кнопки. В реальной жизни никто не хочет читать длинный текст или тратить время на поиск навигационных ссылок или другой важной информации, поэтому значки играют здесь ключевую роль. Несколько лет назад люди использовали изображения для отображения иконок, но теперь все изменилось. Давайте рассмотрим еще один пример, чтобы понять использование изображений в качестве значков. Предположим, нам нужно добавить 20-30 значков на наш веб-сайт, в этом случае нам нужно 30 изображений для отображения значков.Таким образом, создание 20-30 изображений также потребует ресурсов и времени. Чтобы решить эту проблему, появилась концепция Fontawesomeicons. По сути, fontawesomeicons — это библиотека, которая содержит список всех возможных иконок.

Как пользоваться иконками Фа Фа?

Чтобы использовать fontawesomeicons, вам просто нужно включить библиотеку fontawesomeicons, а затем использовать классы CSS. Вы можете добавить любые значки за считанные секунды, используя эту библиотеку. Вместо того, чтобы тратить свое время, вы можете очень легко принять эту библиотеку, она проста и легко интегрируется.Если у вас есть базовые представления о HTML, CSS, вы можете легко их использовать. Эта библиотека также предоставляет вам некоторые базовые настройки, такие как изменение размера значка, цвета значка и т. Д. Здесь, на этой странице, мы показали значки, которые обычно используются почти во всех приложениях. Вы можете напрямую скопировать HTML-код вместе с css и использовать значок. Убедитесь, что вы включили библиотеку значков fontawesome. Есть несколько других библиотек, доступных для иконок, но библиотека иконок Font Awesome является наиболее популярной и широко используемой разработчиками/дизайнерами.

URL CDN значков Fontawesome | Ссылка

Вы можете включить библиотеку иконок Fontawesome, просто используя приведенную ниже ссылку cdn url.

Font Awesome Icons Example

После включения библиотеки вы сможете использовать шрифтовые значки. Вот пример использования значка с использованием библиотеки fontawesome:

Font Awesome Icons Преимущества

  • Легко Создает эмоциональную привлекательность.
  • Очень привлекательный.
  • Приятный эффект для глаз и мозга.
  • Замена длины текста.
  • Повышает удобство использования продукта.

Для посещения последних государственных должностей — Экзамен Саркари

Font Awesome Icons | Объединить

Фа-500px fa-батарея-квартал fa-батарея пуста фа-батарея-три четверти фа-календарь-плюс-о фа-хром fa-contao fa-fonticons fa-gg-круг рука-мир-о фа-рука-спок-о фа-песочные часы-половина фа-песочные часы-о промышленность булавка карты fa-объект-разгруппировать фа-опера фа заметка fa-tripadvisor fa-y-комбинатор фа-амазонка fa-батарея-половина fa-батарея-полный фа-черный галстук фа-календарь-раз-о фа-клон fa-creative-commons фа-бесполый фа-рука-рок-о фа-рука-указатель-о фа-рука-бумага-о фа-песочные часы-конец фа-песочные часы-старт fa-интернет-исследователь fa-карта-знаки фа-одноклассники fa-optin-монстр fa-sticky-note-o телевидение fa-y-комбинатор fa-баланс-шкала фа-батарея-три четверти fa-батарея-половина фа-календарь-чек-о fa-cc-diners-club fa-комментирование fa-expeditedssl fa-получить-карман фа-ручная ящерица-о фа-рука-рок-о фа-песочные часы фа-песочные часы-конец fa-houzz фа-карта фа-указатель мыши fa-odnoklassniki-квадрат fa-зарегистрированный фа-телевидение fa-vimeo fa-батарея пуста fa-батарея-полный fa-батарея-квартал фа-календарь-минус-о fa-cc-jcb fa-commenting-o fa-firefox фа-гг фа-рука-бумага-о фа-ножницы-о фа-песочные часы-старт фа-песочные часы-половина fa-i-курсор фа-карта-о fa-объект-группа fa-opencart фа-сафари fa-торговая марка fa-wikipedia-w

45 новых иконок в 4.2

фа-ангелист фа-белл-слэш-о фа-автобус fa-cc-обнаружить fa-cc-виза fa-google-кошелек фа-lastfm-квадрат кисть фа-шекель выключение fa-twitch диаграмма с областями велосипед калькулятор cc-mastercard fa-авторское право fa-ils фа-линейная диаграмма PayPal шекель Фа-билдинг включение вай фай в бинокль fa-cc fa-paypal пипетка ioxhost fa-meanpath круговая диаграмма fa-слайдшер фа-мусор фа-визг фа-колокол-косая черта фа-торт на день рождения fa-cc-amex fa-cc-полоса футбол-о фа-йаху fa-lastfm фа-газета фа-штекер фа-футбольный мяч-о фатти

72 новых значка в 4.1

fa-car фа-бомба фа-ребенок фа-куб fa-deviantart фа-конверт-квадрат fa-файл-код-о fa-файл-pdf-o fa-файл-аудио-о фа-империя фа-выпускной-кепка Фа-университет fa-openid fa-paw fa-qq fa-reddit fa-share-alt fa-soundcloud фа-пар fa-wordpress Фа-билдинг fa-circle-o-notch fa-кубики фа-копать факс fa-файл-excel-о fa-файл-изображение-о фа-файл-видео-о fa-git фа-хакер-новости фа-джумла фа-бумажный самолетик fa-pied-piper бунтарь fa-reddit-квадрат fa-share-alt-square фа-космический шаттл фа-паровая площадь любимая лоза фа-йаху fa-behance fa-круг-тонкий fa-база данных фа-друпал fa-файл-архив-о fa-файл-изображение-о fa-файл-изображение-о фа-файл-слово-о fa-git-квадрат фа-заголовок fa-jsfiddle фа-бумажный самолетик-о fa-pied-piper-alt fa-слабый фа-ложка споткнуться fa-tencent-weibo фа-вэйсинь fa-codepen фа-вкусный fa-car fa-файл-аудио-о фа-файл-видео-о fa-powerpoint-o фа-архив-о фа-гугл фа-история фа-язык фа-выпускной-кепка фа-абзац fa-pied-piper fa-перерабатывать фа-слайдеры fa-spotify fa-stumbleupon-circle фа-дерево

фа-регулировка фа-стрелки-ч фа-бан фа-бары фа-болт фа-закладка-о фа-здание-о фа-календарь fa-caret-square-o-up fa-check-circle-o фа-круг фа-часы-о fa-код fa-cogs фа-комментарии-о фа-прицел fa-тахометр fa-тахометр фа-конверт обмен фа fa-внешняя ссылка факс фа-огнетушитель фа-болт fa-папка-открыть фа-молоток fa-стекло fa-hdd-o фа-история fa-info фа-клавиатура-о фа-молоток fa-расположение-стрелка fa-share fa-карта-маркер фа-минус фа-мобиль фа-бумажный самолетик-о фа-карандаш-квадрат-о фа-картинка-о фа-плюс-квадрат fa-головоломка фа-цитата слева фа-обновление фа-ретвит fa-rss-квадрат фа-бумажный самолетик fa-share-alt-square fa-корзина fa-sort-alpha-asc fa-sort-asc fa-sort-numeric-desc фа-звезда-половина фа-звезда-о фа-звезда-о fa-планшет фа-задачи большой палец вниз фа-билет оттенок фа fa-caret-square-o-up fa-грузовик фа-разблокировать-альт fa-пользователи fa-громкость вверх фа-якорь fa-стрелки-v фа-пиво портфель фа-мегафон фа-календарь-о fa-caret-square-o-down fa-сертификат фа-чек-квадрат фа-круг-о фа-облако вилка fa-кода fa-комментарий fa-компас fa-база данных фа-восклицание fa-внешняя ссылка-квадрат фа-женщина фа-фильм фа-флаг фа-фляжка fa-папка-open-o fa-cog fa-глобус фа-наушники фа-дом fa-info-circle фа-замок фа-ответ фа-ме-о fa-минус-круг фа-мобиль фа-музыка фа-мобиль фа-телефон фа-самолет фа-плюс-квадрат-о fa-qrcode fa-sort-alpha-desc fa-sort-desc fa-sort-asc фа-квадрат fa-star-half-o фа-чемодан fa-times fa-caret-square-o-down фа-мусор-о фа-зонтик фа-сорт fa-видеокамера восклицательный треугольник fa-архив фа-звездочка фа-гистограмма-о колокольчик фа-книга fa-жук фа-яблочко fa-caret-square-o-left фа-чек fa-check-square-o fa-circle-o-notch fa-cloud-скачать фа-кофе фа-комментарий-о fa-кредитная карта fa-кубики фа-рабочий стол фа-многоточие-ч фа-конверт-квадрат фа-восклицательный круг фа-рабочий стол фа-восклицательный круг фа-глаз Фа-истребитель fa-файл-excel-о фа-фильтр клетчатый fa-папка фа-хмуриться-о fa-cogs фа-сердце fa-ноутбук fa-level-down магия фа fa-ответить всем fa-микрофон фа-минус-квадрат фа-деньги фа-бары фа-карандаш fa-телефон-квадрат фа-плюс fa-power-off fa-вопрос фа-случайный фа-ответ фа-ракета fa-поиск-минус fa-share fa-share-square-o фа-выход фа-улыбка-о fa-sort-количество-по возрастанию фа-космический шаттл фа-квадрат-о фа-тег fa-терминал fa-thumbs-o-up fa-times-circle fa-caret-square-o-left загрузка фа fa-уменьшение громкости инвалидная коляска фа-стрелы fa-штрих-код фа-белл-о fa-закладка fa-камера-ретро fa-caret-square-o-right fa-check-circle фа-ребенок fa-круг-тонкий fa-cloud-upload fa-cog fa-комментарии fa-урожай фа-столовые приборы фа-точка-круг-о fa-многоточие-v ластик слэш fa-файл-архив-о fa-файл-изображение-о фа-файл-слово-о фа-огонь фа-флаг-о фа-папка-о фа-геймпад фа-подарок fa-пользователи фа-сердце-о почтовый ящик фа-ключ лист фа fa-level-up фа-лампочка-о фа-магнит фа-мужчина fa-микрофон-косая черта фа-минус-квадрат-о фа-мун-о fa-карандаш-квадрат фа-плюс-круг fa-print fa-вопрос-круг fa-ответить всем фа-рсс фа-поиск-плюс fa-share-alt фа-щит fa-сигнал фа-сорт fa-сортировка-сумма-убыль fa-sort-numeric-asc прядильщик фа-звезда fa-star-half-o fa-теги fa-thin-tack большой палец вверх fa-times-circle-o fa-caret-square-o-right fa-трофей фа-разблокировать fa-пользователь fa-громкость-выкл. гаечный ключ

fa-угол-двойной-вниз fa-угол-вниз fa-стрелка-кружок-вниз fa-стрелка-круг-о-право fa-стрелка вниз фа-стрелки фа каре вниз fa-caret-square-o-left фа-шеврон-круг-вниз фа-рука-о-вниз фа-длинная стрелка-вниз fa-caret-square-o-down fa-угол-двойной левый fa-угол-влево fa-стрелка-круг-влево fa-стрелка-круг-о-вверх fa-стрелка-влево fa-стрелки-alt фа-каре-левый fa-caret-square-o-right фа-шеврон-круг-левый фа-шеврон-левый фа-рука-о-левая фа-длинная стрелка-влево fa-caret-square-o-left fa-угол-двойной-право fa-угол-право fa-стрелка-круг-о-вниз fa-стрелка-круг-вправо фа-стрелка-вправо фа-стрелки-ч фа-каре-право fa-caret-square-o-up фа-шеврон-круг-право фа-шеврон-право фа-рука-о-право фа-длинная стрелка-вправо fa-caret-square-o-right fa-угол-двойной вверх fa-угол-вверх fa-стрелка-круг-о-влево fa-стрелка-кружок-вверх fa-стрелка-круг-о-влево fa-стрелка-кружок-вверх фа-стрелка вверх fa-стрелки-v fa-caret-square-o-down fa-care-up fa-chevron-circle-up fa-chevron-up фа-рука-о-вверх фа-длинная стрелка вверх fa-caret-square-o-up

фа-адн fa-behance-square fa-btc fa-deviantart фа-друпал fa-flickr fa-git-квадрат фа-друпал fa-flickr fa-git-квадрат fa-gittip фа-хакер-новости fa-jsfiddle fa-maxcdn fa-pied-piper-alt fa-qq fa-reddit-квадрат fa-стек-обмен фа-скайп споткнуться fa-tumblr fa-vimeo-квадрат фа-вейбо факс fa-youtube-play фа-андроид фа-битбакет fa-codepen фа-копать фа-империя fa-foursquare fa-github фа-гугл фа-html5 fa-linkedin fa-openid fa-pied-piper бунтарь фа-ренрен fa-слабый фа-переполнение стека fa-stumbleupon-circle fa-tumblr-квадрат любимая лоза фа-вэйсинь fa-xing-квадрат fa-youtube-квадрат фа-яблоко fa-bitbucket-square fa-css3 fa-дрибббл fa-facebook фа-империя fa-github-alt fa-google-plus фа-инстаграм fa-linkedin-square fa-pagelines fa-pinterest бунтарь fa-share-alt fa-soundcloud фа-пар fa-tencent-weibo фа-твиттер фа-вк фа-окна фа-йаху fa-behance fa-btc фа-вкусный фа-дропбокс fa-facebook-квадрат fa-git fa-github-квадрат fa-google-plus-square фа-джумла фа-линукс fa-pied-piper fa-pinterest-квадрат fa-reddit fa-share-alt-square fa-spotify фа-паровая площадь фа-трелло фа-твиттер-квадрат фа-вэйсинь fa-wordpress fa-youtube


фа-чек-квадрат фа-точка-круг-о фа-плюс-квадрат-о fa-check-square-o фа-квадрат фа-квадрат-о фа-минус-квадрат-о фа-круг фа-плюс-квадрат фа-круг-о
fa-btc fa-eur fa-jpy фа-руб фа-попытка fa-jpy фа-крв фа-руб fa-gbp фа-деньги fa-usd фа-инр
fa-align-center фа-жирный фа-жирный ластик fa-файл-текст-о фа-заголовок фа-лист fa-outdent фа-повтор фа-повтор фа-таблица fa-th-большой фа-цепь-сломанная fa-выравнивание-оправдать фа-ссылка фа-файлы-о fa-файл фа-файлы-о фа-отступ fa-list-alt фа-скрепка фа-отменить fa-перечеркнутый fa-текст-высота fa-th-list fa-align-left фа-цепь-сломанная фа-ножницы фа-файл-о фа-дискета-о fa-курсив фа-лист-ол фа-абзац фа-повтор fa-индекс fa-ширина fa-underlinealign-right fa-буфер обмена fa-outdent fa-файл-текст fa-шрифт фа-ссылка фа-лист-ул
фа-скорая помощь фа-плюс-квадрат fa-h-квадрат фа-стетоскоп фа-госпиталь-о fa-user-md фа-аптечка инвалидная коляска
fa-файл fa-файл-excel-о fa-файл-pdf-o fa-файл-аудио-о фа-файл-слово-о fa-файл-архив-о fa-файл-изображение-о fa-файл-изображение-о fa-файл-текст fa-файл-архив-о fa-файл-аудио-о фа-файл-видео-о fa-файл-изображение-о fa-файл-текст-о fa-файл-код-о фа-файл-о fa-файл-powerpoint-o фа-файл-видео-о
fa-circle-o-notch прядильщик fa-cog fa-cog фа-обновление

29+ значков финансов в шрифте awesome

Значки шрифта awesome имеют 29 различных типов значков финансов.

Имя Тип Название класса Пример
Шкала баланса левая fas fa-баланс-шкала-левая Попробуйте!
Весы баланса справа fas fa-баланс-весы справа Попробуйте!
Книга fas fa-book Попробуйте!
Касса fas fa-касса TryIt!
Chart Line fas fa-chart-line Попробуйте!
Круговая диаграмма fas fa-диаграмма Попробуйте!
Монеты fas fa-coins Попробуйте!
Комментарий в долларах fas fa-comment-dollar Попробуйте!
Комментарии в долларах fas fa-комментарии-доллары Попробуйте!
Кредитная карта fas fa-кредитная карта Попробуйте!
Кредитная карта far fa-credit-card Попробуйте!
Пожертвовать fas fa-пожертвовать Попробуйте!
Файл счета-фактуры fas fa-file-invoice Попробуйте!
Файл счета-фактуры в долларах fas fa-file-invoice-dollar Попробуйте!
Руки, держащие доллары США fas фа-руки, держащие доллары США Попробуйте!
Ориентир Фас Фа-ориентир Попробуйте!
Денежный счет fas фа-мани-счет Попробуйте!
Money Bill Alt fas fa-money-bill-alt TryIt!
Money Bill Alt far fa-money-bill-alt TryIt!
Money Bill Wave fas fa-money-bill-wave Попробуйте!
Money Bill Wave Alt fas fa-money-bill-wave-alt Попробуйте!
Денежный чек fas fa-money-check Попробуйте!
Денежный чек Alt fas fa-money-check-alt Попробуйте!
Процент fas fa-процент Попробуйте!
Копилка фас фа-копилка Попробуй!
Квитанция fas квитанция fas Попробуйте!
Штамп fas fa-штамп Попробуйте!
Бумажник fas fa-бумажник Попробуйте!

font-awesome — Библиотеки — cdnjs

Некоторые файлы скрыты, нажмите, чтобы показать все файлы
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all .css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome /6.1.1/css/brands.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.css
  • https://cdnjs.cloudflare .com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/regular.css
  • https://cdnjs.cloudflare.com/ajax/libs/font- awesome/6.1.1/css/regular.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/solid.css
  • https://cdnjs. cloudflare.com/ajax/libs/font-awesome/6.1.1/css/solid.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/svg -with-js.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/svg-with-js.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/v4-font-face.css
  • https: //cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/v4-font-face.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome /6.1.1/css/v4-shims.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/v4-shims.min.css
  • https:/ /cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/v5-font-face.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/v5-font-face.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1 /js/all.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js
  • https://cdnjs.cloudflare.com/ajax /libs/font-awesome/6.1.1/js/brands.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/brands.min.js
  • https ://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/conflict-detection.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/conflict-detection.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/ font-awesome/6.1.1/js/fontawesome.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/fontawesome.min.js
  • https:// cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/regular.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/regular .min.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/solid.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/solid.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/v4-shims.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome /6.1.1/js/v4-shims.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/sprites/brands.svg
  • https://cdnjs .cloudflare.com/ajax/libs/font-awesome/6.1.1/sprites/regular.svg
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/sprites/solid.svg
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-brands -400.ttf
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-brands-400.woff2
  • https://cdnjs.cloudflare.com/ajax /libs/font-awesome/6.1.1/webfonts/fa-regular-400.ttf
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-regular- 400.woff2
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-solid-900.ttf
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa -solid-900.woff2
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/webfonts/fa-v4compatibility.ttf
  • https://cdnjs.cloudflare.com/ajax /libs/font-awesome/6.1.1/webfonts/fa-v4compatibility.woff2

Как использовать Font Awesome 5 с React

Введение

Font Awesome — это набор инструментов для веб-сайтов, который предоставляет значки и логотипы социальных сетей.React — это библиотека кодирования, которая используется для создания пользовательских интерфейсов. Несмотря на то, что команда Font Awesome создала компонент React для продвижения интеграции, есть некоторые основы, которые нужно понять о Font Awesome 5 и о том, как он структурирован. В этом руководстве вы узнаете, как использовать компонент React Font Awesome.

Предпосылки

Для этого руководства кодирование не требуется, но если вы хотите поэкспериментировать с некоторыми примерами, вам потребуется следующее:

Шаг 1 — Использование Font Awesome

Команда Font Awesome создала компонент React, чтобы вы могли использовать их вместе.С помощью этой библиотеки вы можете следовать инструкциям после выбора значка.

В этом примере мы будем использовать значок home и делать все в файле App.js :

источник/App.js

  импортировать React из «реагировать»;
импортировать {рендеринг} из "React-Dom";

// получаем наш потрясающий импорт
импортировать {faHome} из "@fortawesome/free-solid-svg-icons";
импортировать { FontAwesomeIcon } из "@fortawesome/react-fontawesome";

// создаем наше приложение
константное приложение = () => (
  <дел>
    
  
); // рендеринг в #root визуализировать(<приложение />, документ.получитьэлемент по идентификатору("корень"));

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

Теперь Font Awesome позаботится о том, чтобы этот компонент заменил себя SVG-версией этого значка после монтирования этого компонента.

Шаг 2 — Выбор значков

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

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

В приведенном выше примере мы вытащили значок home из пакета @fortawesome/free-solid-svg-icons .

Определение того, какому пакету принадлежит значок

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

Как только вы узнаете, к какому пакету принадлежит шрифт, важно запомнить трехбуквенное сокращение для этого пакета:

.
  • Однотонный — fas
  • Обычный стиль — дальний
  • Светлый стиль — желтый
  • Duotone Style — модный

Вы можете искать определенный тип на странице значков:

Использование значков из определенных пакетов

Если вы просмотрите страницу значков Font Awesome, вы заметите, что обычно существует несколько версий одного и того же значка.Например, давайте взглянем на значок боксерской перчатки :

.

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

Примечание: Следующие примеры не будут работать, пока мы не создадим библиотеку значков в нескольких разделах.

Вот пример сплошной версии:

  
  

По умолчанию используется сплошная версия, если тип не указан:

  <Значок FontAwesomeIcon={faCode} />
  

И облегченная версия с использованием fal :

  ;
  

Нам пришлось переключить реквизит icon , чтобы он был массивом, а не простой строкой.

Шаг 3 — Установка Font Awesome

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

В этой статье мы установим все, чтобы продемонстрировать, как установить несколько пакетов.

Выполните следующую команду для установки базовых пакетов:

  
  1. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/реагировать-fontawesome

Выполните следующие команды, чтобы установить обычные значки:

  
  1. # обычные значки
  2. npm i -S @fortawesome/free-regular-svg-icons
  3. npm i -S @fortawesome/pro-regular-svg-icons

Они установят сплошные значки:

  
  1. # сплошные значки
  2. нпм i -S @fortawesome/free-solid-svg-icons
  3. нпм i -S @fortawesome/pro-solid-svg-icons

Используйте эту команду для светлых значков:

  
  1. # световые значки
  2. нпм i -S @fortawesome/pro-light-svg-icons

Это установит двухцветные значки:

  
  1. # двухцветные значки
  2. нпм i -S @fortawesome/pro-duotone-svg-icons

Наконец, будут установлены значки брендов:

  
  1. # значки брендов
  2. npm i -S @fortawesome/free-brands-svg-icons

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

  
  1. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg -иконки

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

  
  1. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg -icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

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

Шаг 4 — Создание библиотеки иконок

Импортировать нужный значок в несколько файлов может быть утомительно. Допустим, вы используете логотип Twitter в нескольких местах, вам не нужно писать это несколько раз.

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

Давайте создадим fontawesome.js в папке src , а затем импортируем его в индекс .JS. Не стесняйтесь добавлять этот файл куда угодно, если компоненты, в которых вы хотите использовать значки, имеют доступ (являются дочерними компонентами). Вы даже можете сделать это прямо в вашем index.js или App.js . Однако может быть лучше переместить это в отдельный файл, так как он может стать большим:

src/fontawesome.js

  // импорт библиотеки
импортировать {библиотеку} из '@fortawesome/fontawesome-svg-core';

// импортируем ваши иконки
импортировать {faMoneyBill} из '@fortawesome/pro-solid-svg-icons';
импортировать {faCode, faHighlighter} из '@fortawesome/free-solid-svg-icons';

библиотека.добавлять(
  faMoneyBill,
  faCode,
  faHighlighter
  // здесь больше иконок
);
  

Если вы делали это в собственном файле, то вам нужно импортировать в index.js :

источник/index.js

  импортировать React из 'реагировать';
импортировать {рендеринг} из 'реагировать-дом';

// импортируем вашу библиотеку шрифтов
импортировать './fontawesome';

render(, document.getElementById('root'));
  

Импорт всего пакета значков

Не рекомендуется импортировать весь пакет, потому что вы импортируете каждый значок в свое приложение, что может привести к большому размеру пакета.Если вам нужен весь пакет, вы, безусловно, можете.

В этом примере предположим, что вам нужны все значки брендов в @fortawesome/free-brands-svg-icons . Вы должны использовать следующее для импорта всего пакета:

src/fontawesome.js

  import {библиотека} из '@fortawesome/fontawesome-svg-core';
импортировать { fab } из '@fortawesome/free-brands-svg-icons';

библиотека.добавить(потрясающе);
  

fab представляет собой полный пакет значков бренда.

Импорт значков по отдельности

Рекомендуемый способ использования значков Font Awesome — импортировать их один за другим, чтобы окончательные размеры пакетов были как можно меньше, поскольку вы будете импортировать только то, что вам нужно.

Вы можете создать библиотеку из нескольких значков из разных пакетов, например:

src/fontawesome.js

  import {библиотека} из '@fortawesome/fontawesome-svg-core';

импортировать { faUserGraduate } из '@fortawesome/pro-light-svg-icons';
импортировать {faImages} из '@fortawesome/pro-solid-svg-icons';
импорт {
  faGithubAlt,
  фагугл,
  faFacebook,
  faTwitter
} из '@fortawesome/free-brands-svg-icons';

библиотека.добавлять(
  faUserGraduate,
  фаИзображения,
  faGithubAlt,
  фагугл,
  faFacebook,
  faTwitter
);
  

Импорт одного и того же значка из нескольких стилей

Если вам нужны все типы боксерских перчаток для пакетов fal , far и fas , вы можете импортировать их все как разные имена, а затем добавить.

src/fontawesome.js

  import {библиотека} из '@fortawesome/fontawesome-svg-core';
импортировать { faBoxingGlove } из '@fortawesome/pro-light-svg-icons';
импорт {
  faBoxingGlove как faBoxingGloveRegular
} из '@fortawesome/pro-regular-svg-icons';
импорт {
  faBoxingGlove как faBoxingGloveSolid
} из '@fortawesome/pro-solid-svg-icons';

библиотека.добавлять(
    faBoxingGlove,
    faBoxingGloveRegular,
    faБоксПерчаткаТвердые
);
  

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

  


  

Шаг 5 — Использование значков

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

В этом первом примере будет использоваться обычный размер:

  
  

Во втором примере может использоваться размер с именем , в котором используются сокращения для малого ( sm ), среднего ( md ), большого ( lg ) и очень большого ( xl ):

  



  

Третий вариант — использовать пронумерованный размер, который может доходить до 6 :

.
  




  

При использовании пронумерованных размеров вы также можете использовать десятичные дроби, чтобы найти идеальный размер:

  
  

Font Awesome стилизует используемые им SVG, используя цвет текста CSS. Если бы вы поместили тег

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

  
  

Font Awesome также имеет функцию мощного преобразования, позволяющую объединять различные преобразования:

  
  

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

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

При использовании значков в месте, где все они должны быть одинаковой ширины и единообразия, Font Awesome позволяет нам использовать свойство fixedWidth . Например, предположим, что вам нужна фиксированная ширина для раскрывающегося списка навигации:

.

  







  

Вращающиеся иконки

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

  
  

Вы можете использовать опору spin на чем угодно!

  
  

Дополнительно: маскирование значков

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

В этом примере мы создали фильтры тегов с использованием маскирования:

  
  

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

Мы даже раскрашиваем и меняем фоновый логотип с помощью Font Awesome:

Шаг 6 — Использование

react-fontawesome и значков вне React

Если весь ваш сайт не является одностраничным приложением (SPA), а вместо этого у вас есть традиционный сайт и добавлен React сверху.Чтобы избежать импорта основной библиотеки SVG/JS, а также библиотеки react-fontawesome , Font Awesome создал способ использования библиотек React для поиска значков вне компонентов React.

Если у вас есть какие-либо , мы можем указать Font Awesome отслеживать и обновлять их, используя следующее:

  импорт {дом} из '@fortawesome/fontawesome-svg-core'

dom.watch() // Это запустит первоначальную замену тегов i на svg и настроит MutationObserver
  

MutationObserver — это веб-технология, которая позволяет нам эффективно отслеживать изменения DOM.Узнайте больше об этой технике в документации React Font Awesome.

Заключение

Совместное использование Font Awesome и React — отличное сочетание, но оно создает необходимость использования нескольких пакетов и рассмотрения различных комбинаций. В этом уроке вы изучили несколько способов совместного использования Font Awesome и React.

Руководство для начинающих по Font Awesome

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

В этом уроке я покажу вам, как использовать Font Awesome и поэкспериментировать с его функциями.

Шаг №1. Загрузите и установите Font Awesome

.
  • Распакуйте молнию.
  • Скопируйте папки /css/ и /fonts/ и загрузите их на свой сайт.

Внутри тега head вашего сайта загрузите Font Awesome CSS:

{codecitation}{/codecitation}

Шаг №2.Добавьте иконки на свой сайт

Чтобы добавить значок, используйте тег i по следующему шаблону:

{codecitation}{/codecitation}

Замените «icon-name» одним из названий значка отсюда. Например, чтобы отобразить значок «галочка», используйте этот код:

.

{codecitation}{/codecitation}

… это будет отображаться как:

Примечание: вы также можете использовать тег span или em.

Шаг №3.Используйте большие значки

Для отображения больших значков включите один из этих классов в тег i :

  • fa-lg
  • фа-2х
  • фа-3х
  • фа-4х
  • фа-5х

Например:

{codecitation}{/codecitation}

Шаг №4. Используйте сложенные значки

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

{codecitation}
[Здесь находятся значки]
{/codecitation}

Два значка могут дополнительно включать один из следующих классов:

  • «fa-stack-2x», чтобы увеличить значок контейнера
  • «fa-stack-1x», чтобы сделать значок меньшего размера

Например:

{codecitation}




{/codecitation}

  • Валентин Гарсия

    Валентин открыл для себя Joomla в 2010 году и с тех пор считает ее лучшей CMS.

Leave a Reply