Как правильно добавлять значки Font Awesome в logger
Font Awesome предоставляет собой масштабируемые векторные значки, которые можно мгновенно настроить — размер, цвет, тень и все, что можно сделать с помощью CSS свойств.
Как подключить иконки Font Awesome к сайту, блогу
Есть два варианта подключения (См. на скриншоте ниже)- Через официальный сайт: Перейдите на страницу начала работы с Font Awesome и введите свой адрес электронной почты. Они отправят вам электронное письмо с кодом для вставки, который выглядит примерно так:
- Вставить ссылку, которая подключит ваш сайт к базе font awesome между тегами <head> ... </head> вашей темы:
<scriptsrc='https://kit.fontawesome.com/a076d05399.js'crossorigin='anonymous’>
Теперь вам нужно скопировать и вставить его в заголовок вашей темы «Тема»> «Настроить»> «Изменить HTML». Вставлять скрипт Font Awesome нужно между тегами заголовка </head>…</head>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' integrity='sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' rel='stylesheet'/>
Как добавить к нужному элементу иконки Font Awesome
Вам нужно выбрать нужную иконку на сайте Font Awesome и скопировать ее HTML код:
<i class="fa fa-car" </i> и вставить его перед тем
элементом, который хотите выделить
Добавление стилей CSS к иконке
< i class="fa fa-car"style="color: red; font-size: 28px;"</i>
Машины
Пример использование иконок для меню сайта:
<button style='font-size:14px'><a href="#">Главная
<i class='fa fa-home'style='font-size:18px;color:#0ac4fc'></i></a>
<i class='fa fa-home'style='font-size:18px;color:#0ac4fc'></i></a>
</button>
Вы можете
разместить иконки Font Awesome в любом месте, используя в имени класса
префикс fa и название иконки. Font Awesome разработан так, чтобы он мог
быть использован в строчных элементах (тег <i> ... </i>).
Как изменить стили конкретной иконки и шрифт любого текста
- *Для более тонкой настройки шрифта вам потребуется загрузить файлы Font Awesome в папку своего проекта, а затем создать ссылку на его CSS-файл на своих веб-страницах, чтобы импортировать Font Awesome.
- *Перейдя на стартовую страницу fontawesome.com/, прокрутите вниз до раздела «Другие способы использования» (Other Ways to Use). Далее жмем кнопку «Загрузить» и выбираем, в нашем случае, «FRE FOR WEB»
Сообщения
Напишите,пожалуйста,отзыв на статью! ✍
Написать отзыв