/cache/autoptimize/css/autoptimize_67f838f81e815ea66aed120aba46de2f.css «rel =» stylesheet «/> Font Awesome & # 8211; вставка значков на страницу & # 8211; Создание страниц & # 8211; веб-мастер блога Перейти к содержанию Создание страниц — создание страниц блога ДомойКонтакт Поиск по этому сайту Меню Закрыть Домой Контакт Создание страниц Font Awesome & # 8211; вставка значков на страницу Главная> веб-мастер>Font Awesome & # 8211; вставка иконок на сайт Сообщение опубликовано: 13 марта 2019 Категория сообщения: графика/веб-мастер Комментарии к публикации: 0 комментариев

В этой теме я покажет вам, как вставлять на страницу значки, созданные с помощью кода css. Благодаря этому вы сможете быстро и легко прикрепить много интересных значков и ускорить работу сайта.

https://fontawesome.com

Нажмите кнопку & # 8222; начать пользоваться бесплатно & # 8221; и скопируйте туда код:

& lt; link rel = «stylesheet» href = «https://use.fontawesome.com/releases/v5.7.2/css/all.css» Integльность = «sha384 -fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpHpHLBRHiGiudi7 «crossorigin =» anonymous «>

Перейдите на главную страницу Font Awesome, посмотрите на значки в поисках чего-нибудь интересного. Отметьте & # 8222; бесплатно & # 8221; для поиска только бесплатных. Щелкните значок, а затем кнопку & # 8222; начать использовать этот значок & # 8221;.

У нас появилось всплывающее окно с кодом, который мы копируем.

& lt; i class = «far fa-envelope»> & lt;/i>

Мы вставляем этот код в выбранное нами место на странице. С этого момента у нас есть значок электронной почты.

Значок небольшой, но мы можем свободно стилизовать его с помощью CSS, а также можем добавить соответствующие стили в код значка, который изменит его размер, цвет и т. Д. толщина края и т. д.

Добавьте в код: fa-2xЭто означает, что мы увеличиваем значок.

Это означает, что мы увеличиваем значок.

& lt; i class = «far fa-envelope fa-2x»> & lt;/i>

Мы также можем изменить его цвет, например, добавить код: style = & # 8221; цвет: # 339af0;

& lt; i class = «far fa-envelope fa-2x» style = «color: # 339af0;»> & lt;/i>

В документации по адресу: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use мы можем увидеть, какие еще коды могут быть использованы для значков.

Вы также можете иметь анимированные значки, значки в стиле списка ul, можно вращать, можно зеркально отображать. Есть много интересных вариантов. Благодаря этому нам не нужно летать по страницам и искать значки, у нас все в одном месте, и мы можем придавать им разные стили. Дополнительным преимуществом такого решения является то, что страница загружается быстрее, и мы получаем лучшие результаты в тестах скорости страницы 🙂