Как использовать font awesome в css

Использовать Font Awesome через CSS

Подскажите, мне надо перед текстом который находиться в li, путями css, поместить Icons(из font awesome). Как я понимаю надо через content, но когда вписываю юникод, то вместо иконки, выводит сам юникод.

 .list li:before

ПОДСКАЖИТЕ ГДЕ Я ТУПЛЮ, БОЛЬШОЕ СПАСИБО
Отслеживать
задан 29 июл 2018 в 19:30
49 1 1 серебряный знак 7 7 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Нужно ещё указать сам шрифт, а перед юникодом нужно ставить слэш:

.list li:before

Отслеживать
ответ дан 29 июл 2018 в 20:27
1,522 9 9 серебряных знаков 18 18 бронзовых знаков

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Примеры

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

The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

Базовые иконки

Пример: Базовые иконки fa-camera-retro

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

 class="fa fa-camera-retro"> fa-camera-retro 

• Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше. Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.

Увеличенные иконки

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

 class="fa fa-camera-retro fa-lg"> fa-lg  class="fa fa-camera-retro fa-2x"> fa-2x  class="fa fa-camera-retro fa-3x"> fa-3x  class="fa fa-camera-retro fa-4x"> fa-4x  class="fa fa-camera-retro fa-5x"> fa-5x 

• Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.

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

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

 class="list-group">  class="list-group-item" href="#"> class="fa fa-home fa-fw" aria-hidden="true">  Главная  class="list-group-item" href="#"> class="fa fa-book fa-fw" aria-hidden="true">  Библиотека  class="list-group-item" href="#"> class="fa fa-pencil fa-fw" aria-hidden="true">  Приложения  class="list-group-item" href="#"> class="fa fa-cog fa-fw" aria-hidden="true">  Настройки  

Иконки списков

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

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

Обрамленные и вынесенные иконки

…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.

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

 class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"> . Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. 

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

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

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

 class="fa fa-spinner fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-circle-o-notch fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-refresh fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-cog fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-spinner fa-pulse fa-3x fa-fw">  class="sr-only">Загрузка. 

На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект «безудержного веселья» у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.

На заметку: Анимация CSS3 не поддерживается в IE8 — IE9.

Повернутые и отзеркаленные иконки

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

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

 class="fa fa-shield"> normal  class="fa fa-shield fa-rotate-90"> fa-rotate-90  class="fa fa-shield fa-rotate-180"> fa-rotate-180  class="fa fa-shield fa-rotate-270"> fa-rotate-270  class="fa fa-shield fa-flip-horizontal"> fa-flip-horizontal  class="fa fa-shield fa-flip-vertical"> fa-flip-vertical 

Групповые иконки

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

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

 class="fa-stack fa-lg">  class="fa fa-square-o fa-stack-2x">  class="fa fa-twitter fa-stack-1x">  fa-twitter на fa-square-o  class="fa-stack fa-lg">  class="fa fa-circle fa-stack-2x">  class="fa fa-flag fa-stack-1x fa-inverse">  fa-flag на fa-circle  class="fa-stack fa-lg">  class="fa fa-square fa-stack-2x">  class="fa fa-terminal fa-stack-1x fa-inverse">  fa-terminal на fa-square  class="fa-stack fa-lg">  class="fa fa-camera fa-stack-1x">  class="fa fa-ban fa-stack-2x text-danger">  fa-ban на fa-camera 

Примеры для Bootstrap 3

• Редактировать
• Удалить
• Забанить
• Дать права администратора

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

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

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

Пример рейтинга (позаимствовано из CSS Tricks)

Общедоступность

Обновление. Сохранение. Держитесь крепче!

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

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

 class="btn btn-default" href="path/to/settings" aria-label="Настройки">  class="fa fa-cog" aria-hidden="true">   class="btn btn-danger" href="path/to/settings" aria-label="Удалить">  class="fa fa-trash-o" aria-hidden="true">   class="btn btn-primary" href="#navigation-main" aria-label="Перейти к основному меню">  class="fa fa-bars" aria-hidden="true">  

 class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true">  class="sr-only">Обновление.  class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true">  class="sr-only">Сохранение. Держитесь крепче! 

 class="input-group margin-bottom-sm">  class="input-group-addon"> class="fa fa-envelope-o fa-fw" aria-hidden="true">  class="form-control" type="text" placeholder="Ваш email">   class="input-group">  class="input-group-addon"> class="fa fa-key fa-fw" aria-hidden="true">  class="form-control" type="password" placeholder="Пароль">  

 href="path/to/shopping/cart" class="btn btn-primary" aria-label="Посмотреть 3 предмета в вашей корзине">  class="fa fa-shopping-cart" aria-hidden="true">  

 class="fa fa-battery-half" aria-hidden="true">  class="sr-only">Уровень заряда: 50% 

Font Awesome 4.7.0 ·
Создано Дейвом Ганди (Dave Gandy) ·
Перевод на русский язык Дима Калдузов

Font Awesome предоставляется по лицензии SIL OFL 1.1 ·
Разработка предоставляется по лицензии MIT License ·
Документация предоставляется по лицензии CC BY 3.0

Как подключить Font Awesome в HTML и CSS

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

Что такое шрифт Awesome

Шрифт «Font Awesome» – это набор иконок, который используется для веб-разработки и создания интерфейсов. В него входит более 26 000 векторных иконок, которые можно легко встраивать в веб-страницы и приложения, используя CSS-классы.

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

Он также обеспечивает гибкость настройки размера, цвета и стиля иконок с использованием CSS. Всё это делает его популярным инструментом для создания современных и креативных веб-интерфейсов.

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

• Это действительно шрифт. Существуют и другие способы отображения значков и иконок. Например, можно использовать отдельные изображения или CSS-спрайты. Однако Awesome к ним не относится, так как это самый настоящий шрифт, который помогает улучшить панель поиска, навигацию и любое другое место, где уместны иконки, логотипы или символы .
• Его легко адаптировать и стилизовать. Использование этого шрифта позволяет сделать иконки настолько четкими, насколько позволяет ваше устройство. Благодаря этому не нужно беспокоиться о подготовке графики к Retina-дисплеям, поскольку Font Awesome в любом случае предоставит вам высокое качество значков. В век адаптивного дизайна это важно как никогда прежде.

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

• Совместимость с браузерами. Не беспокойтесь о совместимости Font Awesome с браузерами, ведь он хорошо поддерживается всеми современными продуктами. Он обрабатывается так же, как и любые другие веб-шрифты.
• Скорость. Все иконки находятся в одном файле шрифта, поэтому для загрузки Font Awesome требуется всего один HTTP-запрос.

Виртуальный хостинг

Если у вас ещё нет подходящего хостинга для вашего сайта, обратите внимание на виртуальный SSD хостинг RU-CENTER. Он поддерживает PHP , MySQL и подходит для сайтов любой сложности.

Приобретя эту услугу у нас, вы также получите доступ к последним версиям самых популярных систем управления контентом: WordPress, Joomla, 1С–Битрикс, Drupal, ModX, OpenCart.

Независимо от того, является ли ваш проект личным блогом или высоконагруженным корпоративным ресурсом, хостинг RU-CENTER предоставит вам всё необходимое для его поддержки.

Как установить шрифт Awesome

Есть два варианта того, как можно его получить:

Способ 1. Через официальный сайт

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

Как правило, бесплатной версии (Free) достаточно, но вы также можете рассмотреть платные варианты (Pro) с дополнительными иконками и функциональностью.

Затем выполните распаковку архива и скопируйте содержимое папок «/css» и «/webfonts» в свою веб-директорию (например, в папку /css/awesome).

После этого добавьте следующую строку в тег вашего сайта, чтобы подключить стили Awesome:

Способ 2. CDN Font Awesome

Подключите Font Awesome с помощью CDN (Content Delivery Network). Это самый простой способ, и он не требует загрузки и установки файлов на вашем сервере.

Для этого просто вставьте следующий код в ваш HTML-файл:

Важно! URL может меняться в зависимости от выбранной вами версии Font Awesome. Наш код подходит для последней доступной версии 6.4.4.

У такого подхода есть несколько плюсов:

+ Сайт будет работать быстрее благодаря параллельной загрузке данных с разных серверов – сайт будет загружаться с вашего хостинга, а шрифты – из сети Awesome.

+ Кроме того, если вы уже посещали сайты со шрифтом Awesome, он уже есть в кэше вашего браузера.

Однако у этого метода есть и свои недостатки:

– Он не подходит для автономных сайтов (без доступа к интернету).

– Создает зависимость от CDN сети Awesome.

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

Какую версию Font Awesome лучше выбрать

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

Кроме того, на этой же странице можно выбрать Font Awesome 5, у которого еще больше версий – вплоть до 5.15.4.

На сентябрь 2023 года последний доступный релиз – это 6.4.2.

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

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

Поэтому выбор релиза Font Awesome полностью зависит от ваших потребностей и ограничений сайта.

Библиотека иконок Font Awesome: где найти

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

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

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

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

1. С помощью HTML-тега

Вставьте тег с классом, который соответствует нужной иконке. Например, если вы хотите использовать иконку «сердце», используйте следующий код:

Что здесь происходит?

• «fas» указывает на стиль иконки – Solid, то есть «сплошной».
• Для отображения иконки нужен класс «fa».
• «fa-heart» – это и есть иконка «сердца».

1. С помощью тегов , ,

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

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

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

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

Этот код поместит иконку «облака» внутрь элемента . Как и в предыдущем случае, вы можете применить дополнительные стили к , чтобы настроить его.

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

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

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

Это – лучший способ начать день!

Когда браузер обработает этот HTML-код, он заменит иконкой чашки кофе в тексте. Таким образом, вы получите следующий результат:

Настройка размеров иконок Font Awesome с помощью классов – это удобный способ адаптировать иконки под дизайн вашего веб-сайта.

Для изменения размера иконок вы можете использовать классы, которые начинаются с fa- и затем указать размер:

• fa-xs – уменьшает размер иконки до минимального.
• fa-sm – устанавливает маленький размер иконки.
• fa-lg – устанавливает большой размер иконки.
• fa-2x, fa-3x и так далее – указывают конкретный множитель размера. Соответственно, «fa-2x» удвоит размер иконки, а «fa-3x» утроит его.

В первом случае иконка звезды будет увеличена вдвое. Во втором – иконка облака просто отобразится в большом размере.

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

Изменение цвета иконок

Для изменения цвета иконок вы можете использовать стили CSS, добавив атрибут «style» к элементу и указав цвет с помощью свойства «color».

В первом коде для иконки звезды задается золотой цвет, а во втором – белый для иконки облака.

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

Изменение отступов

Чтобы установить отступ для иконки Font Awesome, вы можете использовать свойство «margin» в CSS.

• margin-top – отступ сверху;
• margin-bottom – отступ снизу;
• margin-left – отступ слева;
• margin-right – отступ справа.

Этот код устанавливает отступ справа от иконки в десять пикселей.

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

В этом примере иконка почтового конверта (fa-envelope) помещена внутрь вместе с текстовой отметкой () – «Написать письмо». Вы можете применить любые стили к контейнеру или элементам внутри него.

Если вы хотите настроить стили иконок, вы можете добавить дополнительные классы или стили CSS к элементам с иконками.

Этим кодом мы установили цвет («red») и размер иконки пользователя («24px»).

Таким образом, мы подключили и настроили Font Awesome на вашем веб-сайте.

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

Font Awesome: полное руководство по библиотеке

Бесплатные иконки Font Awesome: что это и для чего используется. Как подключить значки на сайт. Преимущества и недостатки библиотеки.

Что такое Font Awesome и для чего используется на сайте. Преимущества библиотеки.

Набор иконок Font Awesome: подробное руководство

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

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

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

В FontAwesome все значки абсолютно и полностью бесплатны. Библиотека поддерживает лицензию GNU GPL (GNU General Public License). Это значит, что его можно беспрепятственно использовать в коммерческих проектах и в принципе везде.

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

Обычно скрипты шрифтов Font Awesome используют вместе с Bootstrap и BootstrapCDN. По популярности Font Awesome занимает второе место после Google Fonts.

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

Главная особенность заключается в том, что все иконки Font Awesome — это не статические изображения. Они имеют шрифтовый формат. Другими словами, это иконочные шрифты. Например, значок поиска или логотип социальной сети — это то же самое, что и простые символы «A», «B», «C».

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

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

Почему дизайнеры выбирают Font Awesome

У Font Awesome есть ряд преимуществ:

• Быстрое подключение. Достаточно просто скачать специальный файл с официального сайта и подключить его, указав путь к нему в коде CSS.
• Гибкость и масштабируемость. Значки можно увеличить до любого размера. Символы будут настолько четкими, насколько позволяет то или иное устройство. В эпоху адаптивного дизайна это важно. Кстати, по этой же причине иконки Font Awesome подходят для Retina-дисплеев.
• Стилизация. У иконок легко изменить цвет, размер, тень или любые другие внешние параметры. Дизайнер получает все преимущества стилизации обычного текста. А еще значки можно вращать. Например, отобразить вверх ногами или повернуть на 90 градусов.
• Быстрая загрузка сайта. Все значки включены в один файл шрифта. Так что для подгрузки Font Awesome требуется лишь один HTTP-запрос. Это прекрасно сказывается на производительности сайта.
• Любовь браузеров. Font Awesome — кроссбраузерный инструмент. Не придется беспокоиться о совместимости шрифтов и иконок с браузером. Они хорошо поддерживаются всеми из них. Даже стареньким IE8.
• Совместимость с разными фреймворками. Библиотека создавалась в первую очередь для Bootstrap. Однако она будет отлично совмещаться и с другими фреймворками.
• Несколько форматов. Инструмент доступен в форматах .eot, .ttf, .woff и svg. Так что Font Awesome обрабатывается так же, как и другие веб-шрифты.
• Отсутствие необходимости в JavaScript. Для работы Font Awesome не требуется JavaScript.

Таким образом, Font Awesome — это эффективный и удобный инструмент, который существенно экономит время верстки и ускоряет работу сайта.

Недостатки Font Awesome

У инструмента есть и недостатки. К счастью, их немного.

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

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

Версии Font Awesome: 5 и 6

Font Awesome 5 был выпущен 7 декабря 2017 и изначально содержал 1278 значка. Пятая версия поставляется в двух пакетах: в бесплатном (Font Awesome Free) и в платном (Font Awesome Pro). В бесплатном тарифном плане также имеются значки из всех четвертых версий. Значки доступны по лицензиям SIL Open Font License 1.1, Creative Commons Attribution 4.0, а также MIT.

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

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

Бесплатный и платный планы: отличия и особенности

Скачать значки можно по бесплатному или платному тарифному плану.

Бесплатный тариф включает более 1600 иконок и 1 комплект. Комплект — это набор значков, стилей и настроек, который позволяет быстро вносить изменения без добавления кода.

• Включает более 7800 иконок и 20 комплектов.
• Предоставляет доступ к Font Awesome Pro. Это значит, что значки можно будет использовать в собственных мобильных приложениях и на компьютере (например, в текстовом редакторе Word или при создании презентации в Powerpoint).
• Позволяет загружать свои собственные иконки. Свои собственные значки можно использовать наравне с официальными иконками Font Awesome либо вместо них. Например, так можно загрузить логотип компании. С собственными значками можно совершать те е действия, что с базовыми — менять стиль, размер, цвет и т. д.

Обе версии являются бессрочными. То есть предоставляются один раз и навсегда.

Способы подключения Font Awesome

В первую очередь нужно зайти на официальный сайт и скачать библитотеку. Скачанный архив необходимо распаковать и скопировать папки css и fonts в папку своего сайта.

После этого между тегами head указывается путь к файлу библиотеки. Например:

Как отобразить иконки Font Awesome на сайте. Наиболее популярные методы:

1. С помощью HTML

Самый простой способ.

Необходимо зайти в галерею на официальном сайте (fontawesome.com/icons?d=gallery) и выбрать понравившуюся иконку. У каждой иконки есть персональный код, например: . Достаточно его скопировать и вставить в нужное место в коде.

2. Через CSS

Для этого используют псевдоэлементы after или before, а также Unicode необходимого значка. Его можно взять все в той же галерее. Пример такого кода: f209.

Пример записи в файле стилей:

div::after 

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

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