Вернуться на предыдущую страницу

CSS код и примеры использования этого шрифта-иконок «Font Awesome». Ниже Вы видите сам CSS код и таблицу с примерами классов, содержимого (content:"") и результат.

Узнайте также о CSS3 с примерами.

Шрифты-иконки Font Awesome

Подключение шрифта:

Добавьте css файл шрифта, который необходим (в зависимости от версии).
Если структура Вашего сайта (приложения) имеет другую файловую структуру (файлы лежат в других папках), то измените все пути на свои пути (например: /assets/css/).
Если Вы не понимаете о чем идет речь, перейдите на эту страницу. Затем нажмите сочетания клавиш Ctrl+U или правой кнопкой мыши на пустом месте страницы > Исходный код страницы / Исходный текст страницы (как-то так должно быть написано в контекстном меню).
Например, подключить шрифт FA можно так:

<link rel="stylesheet" href="/css/fonts/all.min.css">

Данным кодом ↑ будет подключена максимальная версия шрифта со всеми иконками

Также закиньте в эту папку
/css/fonts/
папку из архива
_INVERSER.PRO-89_fontawesome-pro-5.8.2.zip/fontawesome-pro-5.8.2-web.zip/webfonts

Добавьте такой код на страницу или в CSS файл, чтобы можно было легко использовать шрифт FA (<span class="fa-500px"></span>, А НЕ <span class="fa fa-500px"></span>)
[class^="fa-"], [class*=" fa-"]{font-family:'Font Awesome 5 Pro','Font Awesome 5 Brands';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

Как использовать шрифты-иконки?

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

<div class="one"><i class="fa-cloud-download"></i> Скачать файл</div>

Получится:

Скачать файл

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

.fa-star-o:before{content:"\f006";}

1986 иконок
Скопировано
Размер шрифта px:
Тест classname:
<span class="{{testVal}}"></span>
{{ player.cl }}
\{{ player.cn }}
Не найдено
Font Awesome
Официальный сайт

Файлы Font Awesome:

Скачать Font Awesome v5.8.2
Скачать Font Awesome v5.0.12
Скачать Font Awesome v4.7.0