Html иконка как кнопка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Или используйте элемент 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 .

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

Смотрите пример, чтобы увидеть разницу между классами 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 или выше).

Источник

Как сделать кнопку в HTML

Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

Атрибут disabled блокирует доступ к кнопке.

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

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

submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.

reset добавляется кнопкам сброса формы. Когда пользователь нажимает на такую кнопку, браузер возвращает значения всех полей формы к изначальным.

А как же input?

Создать кнопку можно и с помощью тега , если указать ему тип button :

Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .

Как сделать кнопку с иконкой

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

Так вы можете добавлять кнопки с эмодзи, лайками, дизлайками или чем-то ещё. Иконке нужно обязательно задавать размеры, чтобы кнопка зарезервировала место и не прыгала, когда загрузится иконка.

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег и добавляем в него код SVG-изображения.

Вставить фоном в CSS

Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:

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

Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник