Как вставить иконку в css

Работа с иконками

Иконки выводятся через псевдокласс ::before , поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент , но можно использовать и любой другой строчный элемент, например: , и др.

Для указывается два основных класса — fa и fa-icon , где вместо icon пишется имя иконки. Все имена доступны на этой странице.

Иконки разбиты по категориям, также есть поиск по ключевым словам (рис. 1).

Рис. 1. Иконки для видеоплеера

Чтобы добавить иконку с именем play напишем следующий код:

Сам элемент пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.

Размеры иконок

Размер любой иконки из набора мы можем изменить с помощью свойства font-size , переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу как показано в примере 1.

Пример 1. Размер иконок

       
Исходный размер
 
fa-lg
 
fa-2x
 
fa-3x
 
fa-4x
 
fa-5x
  

Результат данного примера показан на рис. 2.

Рис. 2. Размеры иконок

Цвета

Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color , background , text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.

Пример 2. Оформление иконок через стили

Результат данного примера показан на рис. 3.

Рис. 3. Цветные иконки

Font Awesome вводит специальный класс fa-inverse , изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.

Поворот иконок

Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:

• fa-rotate-90 — поворот на 90º по часовой стрелке;
• fa-rotate-180 — поворот на 180º;
• fa-rotate-270 — поворот на 270º;
• fa-flip-horizontal — отражение по горизонтали;
• fa-flip-vertical — отражение по вертикали.

Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).

Пример 3. Поворот и отражение иконок

Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.

Рис. 4. Преобразования иконки

Анимация

Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение. Ниже показано вращение футбольного мяча.

Объединение иконок

Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент с классом fa-stack , а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x , в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.

Для отдельных иконок мы можем задавать собственный стиль, например, цвет иконки. Тем самым получить новые цветовые решения (пример 4).

Пример 4. Комбинация иконок

Результат данного примера показан на рис. 5.

Рис. 5. Комбинация иконок

CSS Как добавить икнонку

Как добавить иконки в блок, сделать чтобы все 4 блока были одинаковыми и не разъезжались, когда в них добавляется текст? Желательно с объяснением, как такое лучше делать вообще, я только учусь. Спасибо.

.wrapper < position: absolute; width: 100%; height: 100%; >.container < width: 1170px; margin: 0 auto; >#header < position: absolute; padding-top: 52px; width: 100%; height: 63px; border-bottom: 1px solid gray; >.logo < float: left; >.logo a < padding: 16px 25px; >.nav < float: right; >.nav li < display: inline-block; float: left; margin-right: 54px; >.nav li:last-child < margin-right: 0 >.nav a < text-transform: uppercase; font: bold 13px Montserrat, sans-serif; color: white; text-decoration: none; >.nav a:hover < border-bottom: 4px solid #ff7200; padding-bottom: 28px; top: 38px; color: #ff7200; /* Цвет ссылки при наведении на нее курсора мыши */ >#home < background: #222 url(../img/Background.jpg) no-repeat; -webkit-background-size: 100%; -o-background-size: 100%; -moz-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; height: 968px; >.title h1 < text-transform: uppercase; font: bold 60px Montserrat, sans-serif; text-align: center; padding-top: 445px; margin: 0; color: white; >.title h5 < font: 18px Raleway, sans-serif; text-align: center; color: white; >.button < margin-left: 500px; height: 50px; width: 170px; line-height: 50px; background-color: #ff7200; margin-top: 70px; >.button a < text-transform: uppercase; font: bold 13px Montserrat, sans-serif; color: white; text-decoration: none; >#web < background: #ffffff; height: 1428px; width: 1170px; -webkit-background-size: 100%; -o-background-size: 100%; -moz-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; >div #web .class < margin: 0; >.nav2 < float: right; position: absolute; width: 100%; border-bottom: 1px solid gray; padding-left: 383px; >.nav2 li < display: inline-block; float: left; margin-right: 30px; >.nav2 li:last-child < margin-right: 0 >.nav2 a < text-transform: uppercase; font: bold 16px Montserrat, sans-serif; text-decoration: none; >.nav2 ul < margin: 0; >.link < display: inline-block; background: #eeeeee; text-align: center; padding: 125px 78px 0; position: relative; color: #444444; text-decoration: none; >.link:after < content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border-style: solid; border-width: 54px 133px 0 133px; border-color: #eeeeee transparent transparent transparent; transform: translateX(-50%); >.link:hover < color: #ffffff; background: #ff7200; >.link:hover:after < border-top-color: #ff7200; >.link2 < display: inline-block; background: #eeeeee; text-align: center; padding: 125px 78px 0; position: relative; color: #444444; text-decoration: none; >.link2:after < content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border-style: solid; border-width: 54px 130px 0 130px; border-color: #eeeeee transparent transparent transparent; transform: translateX(-50%); >.link2:hover < color: #ffffff; background: #ff7200; >.link2:hover:after < border-top-color: #ff7200; >.link3 < display: inline-block; background: #eeeeee; text-align: center; padding: 125px 78px 0; position: relative; color: #444444; text-decoration: none; >.link3:after < content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border-style: solid; border-width: 54px 152px 0 152px; border-color: #eeeeee transparent transparent transparent; transform: translateX(-50%); >.link3:hover < color: #ffffff; background: #ff7200; >.link3:hover:after < border-top-color: #ff7200; >.link4 < display: inline-block; background: #eeeeee; text-align: center; padding: 125px 78px 0; position: relative; color: #444444; text-decoration: none; >.link4:after < content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border-style: solid; border-width: 54px 137px 0 137px; border-color: #eeeeee transparent transparent transparent; transform: translateX(-50%); >.link4:hover < color: #ffffff; background: #ff7200; >.link4:hover:after

 

  
Home
  
Services
  
About
  
Works
  
Team
  
Contact
  
Blog

Welcome to our logic
We Make Awesome Theme For Your Business
Get Started

  
Web Design
  
App Design
  
Graphic Design
  
Game Design

Как использовать и оформлять иконки с помощью CSS?

Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:

1) Подключите иконки к сайту

Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в каждого шаблона или страницы, где хотите использовать иконки Font Awesome.

Для использования последней версии иконок this page смотрите эту страницу .

Здесь мы используем версию 5.8.1 link rel , чтобы определить связь между текущим документом и файлом со ссылкой:

8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Загрузка и установка не требуются.

2) Добавьте иконки к вашему UI

Код иконки будет выглядеть следующим образом:

i fa-camera">i>

3) Добавьте стиль к иконкам

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

Как использовать иконки Font Awesome

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом ( fas, fal, far или fab ).

Используйте элемента для ссылки на элемент:

i fa-camera">i>

Или используйте элемент span :

span fa-camera">span>

Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> head> body> h2>Пример иконок h2> p>Камера p> i class="fas fa-camera"> i> p>Машина p> i class="fas fa-car"> i> p>Конверт p> i class="fas fa-envelope"> i> body> html>

Масштаб иконок Font Awesome и их цвет

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs , span >fa-sm , fa-lg , fa-2x и др.

Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента и задать для него цвет в стиле, или просто установить стиль для элемента .

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> div < color: #1c87c9; > style> head> body> h2>Пример иконок с указанными размерами и цветами h2> div> i class="fas fa-camera fa-xs"> i> i class="fas fa-camera fa-sm"> i> i class="fas fa-camera fa-lg"> i> i class="fas fa-camera fa-2x"> i> i class="fas fa-camera fa-3x"> i> i class="fas fa-camera fa-5x"> i> i class="fas fa-camera fa-7x"> i> i class="fas fa-camera fa-10x"> i> div> body> html>

Класс	Величина
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #8ebf42; > .star < font-size: 2em; > style> head> body> h2>Пример иконок с установленными размерами шрифта и цвета h2> div> p>Иконка с размером по умолчанию. p> i class="fas fa-star"> i> p>Font-size: 2em; p> i class="fas fa-star star"> i> div> body> html>

Использование иконок с кнопками

Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент .

Пример

html> html> head> title>Кнопки с иконками title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> button < border: none; border-radius: 5px; color: #ffffff; padding: 10px 14px; font-size: 16px; cursor: pointer; > button:hover < background-color: #666666; box-shadow: 2px 4px #999999; > .btn < background-color: #999999; > .home < background-color: #ff6347; > .menu < background-color: #008080; > .about < background-color: #e6b800; > style> head> body> h2>Кнопки с иконками h2> p>Icon buttons: p> button class="btn"> i class="fa fa-home"> i> button> button class="btn"> i class="fa fa-bars"> i> button> button class="btn"> i class="fas fa-info-circle"> i> button> p>Кнопки с иконками текстов и разными цветами: p> button class="home"> i class="fa fa-home"> i> Home button> button class="menu"> i class="fa fa-bars"> i> Menu button> button class="about"> i class="fas fa-info-circle"> i> About button> body> html>

Добавление эффекта тени к иконкам

Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.

Установите тень для того элемента, к которому относится иконка:

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Пример иконок с тенью текста h2> div> i class="fas fa-apple-alt"> i> i class="fas fa-car"> i> i class="fas fa-star-half-alt"> i> i class="far fa-smile"> i> i class="fas fa-paw"> i> i class="fas fa-globe-asia"> i> div> body> html>

Использование иконок Font Awesome в списке

С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.

и класс fa-li для элемента
, чтобы заменить маркеры по умолчанию в неупорядоченном списке.

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> span < color: #8ebf42; > style> head> body> h2>Иконки в примере со списком h2> ul class="fa-ul"> li> span class="fa-li"> i class="fas fa-check-double"> i> span>Элемент списка 1 li> li> span class="fa-li"> i class="fas fa-check-circle"> i> span>List item 2 li> li> span class="fa-li"> i class="fas fa-check-square"> i> span>Элемент списка 3 li> li> span class="fa-li"> i class="fas fa-tasks"> i> span>Элемент списка 4 li> ul> body> html>

Анимация иконок Font Awesome

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulse fa-spinner .

Будет выглядеть таким образом:

i fa-spinner fa-spin">i>

Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse :

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Иконки с классами fa-spin и fa-pulse h2> p>Spinner spin: p> i class="fas fa-spinner fa-spin"> i> p>Spinner pulse: p> i class="fas fa-spinner fa-pulse"> i> body> html>

Пример с несколькими анимированными иконками:

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Анимированные иконки h2> i class="fas fa-spinner fa-pulse"> i> i class="fas fa-star fa-spin"> i> i class="fas fa-sync fa-spin"> i> i class="fas fa-haykal fa-spin"> i> i class="fas fa-stroopwafel fa-pulse"> i> i class="fas fa-car fa-spin"> i> body> html>

Поворот иконок Font Awesome

Довольно часто для дополнительного дизайна вам может понадобиться поворачивать, отражать иконку.

Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-* .

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Поворот иконок h2> i class="fas fa-star-half-alt"> i> i class="fas fa-star-half-alt fa-rotate-90"> i> i class="fas fa-star-half-alt fa-rotate-180"> i> i class="fas fa-star-half-alt fa-rotate-270"> i> i class="fas fa-star-half-alt fa-flip-horizontal"> i> i class="fas fa-star-half-alt fa-flip-vertical"> i> i class="fas fa-star-half-alt fa-flip-both"> i> body> html>

Смотрите градус и детали вращения:

Класс	Градус и детали вращения
fa-rotate-90	90°
fa-rotate-180	180°
fa-rotate-270	270°
fa-flip-horizontal	Отражает иконку по горизонтали.
fa-flip-vertical	Отражает иконку по вертикали.
fa-flip-both	Отражает иконку по вертикали и горизонтали (требуется версия 5.7.0 или выше).

CSS Иконки

Самый простой способ добавить иконку на свою HTML-страницу — использовать библиотеку иконок, например, Font Awesome.

Добавьте название указанного класса иконок в любой встроенный элемент HTML (например, или ).

Все иконки в библиотеках иконок ниже представляют собой масштабируемые векторы, которые можно настраивать с помощью CSS (размер, цвет, тень и т.д.)

Font Awesome Иконки

Чтобы использовать иконки Font Awesome, перейдите на fontawesome.com, войдите в систему и получите код для добавления в раздел вашей HTML-страницы.:

Узнайте больше о том, как начать использовать Font Awesome в нашем Font Awesome 5 Учебнике.

Примечание: Не требуется загрузка или установка!

Пример

Для полного ознакомления со всеми иконками Font Awesome, посетите Справочник иконок на нашем сайте W3Schools на русском.

Bootstrap иконки

Чтобы использовать глификонки Bootstrap, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Не требуется загрузка или установка!

Пример

Google Иконки

Чтобы использовать Google иконки, добавьте следующую строку внутри раздела вашей HTML страницы:

Примечание: Не требуется загрузка или установка!

Пример

cloud
favorite
attachment
computer
traffic

Для получения полного списка всех иконок, посетите Учебник иконок на нашем сайте W3Schools на русском.

Примечание. Ссылки на сайты иконок (Fontawesome, Bootstrap, Google-иконки) могут меняться в зависимости от выхода новой версии набора иконок. Поэтому для получения наиболее новой версии набора иконок и ссылки на них посетите официальный сайт необходимого набора и скопируйте нужную ссылку.

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.