Как увеличить размер иконки 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. Комбинация иконок

Примеры

После того, как вы подключили 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

Как использовать и оформлять иконки с помощью 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 или выше).

Как увеличить размеры иконки fontawesome?

• HTML

Как указать картинку для закладок браузера?

• 1 подписчик
• 3 часа назад
• 15 просмотров

• PHP
• +1 ещё

Можно ли уникализировать отправку форм с сайта без cms?

• 1 подписчик
• 8 часов назад
• 91 просмотр