Как подключить font awesome в css
Перейти к содержимому

Как подключить font awesome в css

  • автор:

Как подключить шрифт Awesome у себя на сайте

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

В настоящий момент шрифт Awesome содержит более 1500 бесплатных иконок!

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

Для того чтобы воспользоваться иконками шрифта Awesome нужно скачать набор шрифтов и стилей себе на сайт. Для этого переходим на официальный сайт — https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself и скачиваем архив, нажав на кнопку [Font Awesome Free for the Web].

Как подключить шрифт Awesome у себя на сайте

Далее вам необходимо распаковать архив и скопировать к себе на сайт содержимое папок /css и /webfonts, например в директорию /css/awesome.

Теперь подключите в секции вашего сайта стили Awesome:

Альтернативный способ подключения шрифтов Awesome

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

Плюсом такого решения будет более быстрая скорость работы сайта, так как данные будут параллельно грузиться с разных серверов (сайт — с вашего хостинга, а шрифты — из сети Awesome), кроме того шрифты уже могут быть закешированы браузером, если вы когда-то посещали сайты на которых они используются.

Минус — это невозможность использования на автономных сайтах (без доступа к интернету) и зависимость от CDN сети Awesome. Поэтому я, как правило, использую первый способ.

Как использовать шрифты awesome на сайте

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

  1. задать соответствующие классы для элементов и ;
  2. добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.

Пример использования шрифтов Awesome

Для одного из сайтов я использовал следующий код (для элемента использованы стили шрифта awesome версии 4.7.0):


Поставка вычислительной техники и ПО

Построение систем охранного телевидения и видеонаблюдения

Разработка систем контроля и управления доступом

Проектирование и монтаж ЛВС/СКС и телефонии

Как подключить шрифт Awesome у себя на сайте

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

Где посмотреть иконки Awesome для сайта

Как подключить шрифт Awesome у себя на сайте

Если буквы и цифры у вас нанесены на клавиши клавиатуры и их использование не вызывает затруднений, то вот по шрифтам awesome есть вопрос: а как узнать соответствие кода иконки и его графического изображения. Например, какой использовать HTML код для отображения иконки Android? Чтобы выяснить это посетите официальный сайт — https://fontawesome.com/icons?d=gallery&m=free

Например, изображению Android соответствует следующий код:

Как подключить шрифт Awesome у себя на сайте

На экране он выглядит так:

Какую версию шрифтов Awesome лучше использовать на сайте

Как подключить шрифт Awesome у себя на сайте

Шрифт Awesome постоянно развивается, в него регулярно добавляются новые иконки и варианты их оформления. На момент написания статьи актуальна 5 версия шрифта. Но вы спокойно можете использовать у себя на сайте предыдущие редакции 4.7.0 или даже 3.2.1. Для этого посетите страницы https://fontawesome.com/v4.7.0/ и https://fontawesome.com/v3.2.1/ соответственно.

Обратите внимание, что при скачивании предыдущей версии шрифта вас будут постоянно склонять к использованию новой версии ��

P.S.

На своих сайтах я обычно использую шрифт awesome версии 4.7.0. Причина в том, что он занимает меньше места. Правда в этой версии заметно скромнее набор иконок, в частности отсутствует упомянутая выше иконка Android, которая появилась лишь в версии 5.0.

Благодарности

Иконки Awesome и CSS

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

Что такое Font Awesome?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Иконка перед текстом это html5

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

  Иконка после текста поиск 

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

Добавление FontAwesome через CSS

Иногда требуется добавить иконки FontAwesome нестандартным способом, например через файл стилей или js. Рассмотрим как можно это реализовать.

Допустим у нас есть div, к которому нужно добавить иконку

Как узнать код символа FontAwesome

Шпаргалку по jQuery можно почитать в моей предыдущей статье.

Полезные ссылки

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

Font awesome 5 как подключить к сайту (Напрямую и CDN)

Font Awesome 5 существует в бесплатном и платном варианте, в бесплатном на данный момент времени 1109 иконок, в платном 1,877 и дополнительные возможности.
Здесь будет описано подключения бесплатного пака иконок.

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

Чтобы подключить font awesome 5 через CDN нужно вставить данные строки

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

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