Главная css Иконки Awesome и CSS

Иконки 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 class="fa fa-tree"><i> или <span class="fa fa-tree"><span>

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

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

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

Пример 2

<b style="color:green; font-size: 30px;"><i class="fa fa-tree"><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 class="do">Иконка перед текстом</b>
<span style="color:#e64d26;" class="fa fa-html5"></span> это html5

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

Пример 4

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

<b class="posle">Иконка после текста</b>

<span style="font-style: 20px;">поиск</span> <i style="color:red;" class="fa fa-search fa-2x"></i>

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