Примеры
После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега . Некоторые примеры были позаимствованы из документации Bootstrap.
The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users
Базовые иконки
Пример: Базовые иконки fa-camera-retro
Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег так как он очень короткий, но использование тега будет семантически более правильно).
class="fa fa-camera-retro"> fa-camera-retro - Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше. Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.
Увеличенные иконки
Для увеличения размеров иконок в родительском элементе используйте классы fa-lg (увеличение на 33%), fa-2x , fa-3x , fa-4x , или fa-5x .
class="fa fa-camera-retro fa-lg"> fa-lg class="fa fa-camera-retro fa-2x"> fa-2x class="fa fa-camera-retro fa-3x"> fa-3x class="fa fa-camera-retro fa-4x"> fa-4x class="fa fa-camera-retro fa-5x"> fa-5x - Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.
Иконки с фиксированной шириной
Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам. Прекрасно подходит для тех случаев, когда различная ширина иконок мешает правильному выравниванию. Особенно полезно при использовании иконок в навигации и списках групп.
class="list-group"> class="list-group-item" href="#"> class="fa fa-home fa-fw" aria-hidden="true"> Главная class="list-group-item" href="#"> class="fa fa-book fa-fw" aria-hidden="true"> Библиотека class="list-group-item" href="#"> class="fa fa-pencil fa-fw" aria-hidden="true"> Приложения class="list-group-item" href="#"> class="fa fa-cog fa-fw" aria-hidden="true"> Настройки Иконки списков
- Иконки списков
- могут быть использованы
- как маркеры
- в списках
Используйте классы fa-ul и fa-li для быстрого удаления стандартных маркеров в ненумерованных списках.
Обрамленные и вынесенные иконки
…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.
class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"> . Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Анимированные иконки
Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)
Используйте класс fa-spin , чтобы заставить вращаться любую иконку, и используйте класс fa-pulse , чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner , fa-refresh , и fa-cog .
class="fa fa-spinner fa-spin fa-3x fa-fw"> class="sr-only">Загрузка. class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"> class="sr-only">Загрузка. class="fa fa-refresh fa-spin fa-3x fa-fw"> class="sr-only">Загрузка. class="fa fa-cog fa-spin fa-3x fa-fw"> class="sr-only">Загрузка. class="fa fa-spinner fa-pulse fa-3x fa-fw"> class="sr-only">Загрузка. На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект «безудержного веселья» у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.
На заметку: Анимация CSS3 не поддерживается в IE8 — IE9.
Повернутые и отзеркаленные иконки
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
Чтобы произвольно поворачивать и зеркалить иконки, используйте классы fa-rotate-* and fa-flip-* .
class="fa fa-shield"> normal class="fa fa-shield fa-rotate-90"> fa-rotate-90 class="fa fa-shield fa-rotate-180"> fa-rotate-180 class="fa fa-shield fa-rotate-270"> fa-rotate-270 class="fa fa-shield fa-flip-horizontal"> fa-flip-horizontal class="fa fa-shield fa-flip-vertical"> fa-flip-vertical Групповые иконки
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban на fa-camera
Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.
class="fa-stack fa-lg"> class="fa fa-square-o fa-stack-2x"> class="fa fa-twitter fa-stack-1x"> fa-twitter на fa-square-o class="fa-stack fa-lg"> class="fa fa-circle fa-stack-2x"> class="fa fa-flag fa-stack-1x fa-inverse"> fa-flag на fa-circle class="fa-stack fa-lg"> class="fa fa-square fa-stack-2x"> class="fa fa-terminal fa-stack-1x fa-inverse"> fa-terminal на fa-square class="fa-stack fa-lg"> class="fa fa-camera fa-stack-1x"> class="fa fa-ban fa-stack-2x text-danger"> fa-ban на fa-camera Примеры для Bootstrap 3
- Редактировать
- Удалить
- Забанить
- Дать права администратора
Font Awesome прекрасно работает со всеми компонентами Bootstrap.
Пользовательский CSS
Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.
Пример рейтинга (позаимствовано из CSS Tricks)
Общедоступность
Обновление. Сохранение. Держитесь крепче!
Уровень заряда: 50%
Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.
class="btn btn-default" href="path/to/settings" aria-label="Настройки"> class="fa fa-cog" aria-hidden="true"> class="btn btn-danger" href="path/to/settings" aria-label="Удалить"> class="fa fa-trash-o" aria-hidden="true"> class="btn btn-primary" href="#navigation-main" aria-label="Перейти к основному меню"> class="fa fa-bars" aria-hidden="true"> class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"> class="sr-only">Обновление. class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"> class="sr-only">Сохранение. Держитесь крепче! class="input-group margin-bottom-sm"> class="input-group-addon"> class="fa fa-envelope-o fa-fw" aria-hidden="true"> class="form-control" type="text" placeholder="Ваш email"> class="input-group"> class="input-group-addon"> class="fa fa-key fa-fw" aria-hidden="true"> class="form-control" type="password" placeholder="Пароль"> href="path/to/shopping/cart" class="btn btn-primary" aria-label="Посмотреть 3 предмета в вашей корзине"> class="fa fa-shopping-cart" aria-hidden="true"> class="fa fa-battery-half" aria-hidden="true"> class="sr-only">Уровень заряда: 50% Font Awesome 4.7.0 ·
Создано Дейвом Ганди (Dave Gandy) ·
Перевод на русский язык Дима Калдузов
Font Awesome предоставляется по лицензии SIL OFL 1.1 ·
Разработка предоставляется по лицензии MIT License ·
Документация предоставляется по лицензии CC BY 3.0
Как изменить размер иконки на сайте?
Скачал иконку с flaticon, нужно изменить её размер. Как это можно сделать?
- Вопрос задан более трёх лет назад
- 9049 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Uncle Bob’s Nephew
.icon
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Nikita Titov @Giottox Автор вопроса
.column-1 i:before
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- CSS
Как уточнить в CSS какой из значок редактировать?
- 1 подписчик
- 4 часа назад
- 40 просмотров
- HTML
- +1 ещё
Как стилизовать данный элемент?
- 1 подписчик
- 4 часа назад
- 31 просмотр
- CSS
Как сделать margin в процентах, чтобы не ломался блок?
- 1 подписчик
- 8 часов назад
- 113 просмотров
- HTML
- +1 ещё
Как сверстать такой блок на флексах с изменением порядка его элементов?
- 1 подписчик
- 11 часов назад
- 59 просмотров
- HTML
- +2 ещё
Как лучше оформить такую галерею?
- 2 подписчика
- 13 часов назад
- 100 просмотров
- HTML
- +1 ещё
Как сделать скролл по горизонтали с двумя рядами внутри?
- 1 подписчик
- 13 часов назад
- 37 просмотров
- HTML
- +3 ещё
Верстка блоку отзивов,как сделать так как на дизайне?
- 1 подписчик
- 23 часа назад
- 67 просмотров
- CSS
Как сделать сетку/флекс с переносом из блоков одинаковой ширины, не меньшей чем ширина самого широкого из них?
- 1 подписчик
- вчера
- 40 просмотров
- HTML
- +1 ещё
При создании div боковое меню сдвигается, что делать?
- 1 подписчик
- 27 окт.
- 58 просмотров
- HTML
- +1 ещё
Как создать фигуру на css?
- 1 подписчик
- 27 окт.
- 64 просмотра
от 40 000 до 55 000 ₽
от 50 000 до 50 000 ₽
Food Soul • Калининград
от 150 000 ₽
30 окт. 2023, в 00:03
10000 руб./за проект
29 окт. 2023, в 23:47
1200 руб./за проект
29 окт. 2023, в 23:45
1500 руб./за проект
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Возможно ли восстановить сайт?
- 2 подписчика
- 1 ответ
- 3 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
- 2 подписчика
- 0 ответов
- 1 подписчик
- 2 ответа
- 2 подписчика
- 0 ответов
- 1 подписчик
- 2 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 0 ответов
- 2 подписчика
- 1 ответ
Как использовать и оформлять иконки с помощью 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 или выше). Как изменить размер изображения SVG
Предполагаю, что даже опытный разработчик может столкнуться с такой, казалось бы, простой проблемой.
Что такое SVG?
SVG отлично подходит для отображения логотипов, иконок, карт, флагов, графиков и другой графики, созданной в векторных графических редакторах типа Illustrator, Sketch и Inkscape. SVG позволяет “залить” Ваш логотип в супер-качестве и в высоком разрешении на сайт, и при этом будет весить в десятки раз меньше изображения в формате png.
SVG означает «Масштабируемая векторная графика». Согласно MDN, определение SVG приведено ниже.
Масштабируемая векторная графика (SVG) — это язык разметки на основе XML для описания двухмерной векторной графики. По сути, SVG для графики — это то же самое, что HTML для текста. SVG — это открытый веб-стандарт на основе текста. Он специально разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.
SVG чаще всего используется для изображений и значков при разработке приложений. Если вы работаете с веб-дизайнером, он или она будет отправлять вам изображения в формате SVG, а не в формате JPEG или PNG (если это опытный веб-дизайнер). Поэтому для FrontEnd-разработчика очень важно знать, как работать с SVG.