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 иконок
Тест classname:
<span class="{{testVal}}"></span>
