Как вставить иконку в кнопку css
Перейти к содержимому

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

  • автор:

— элемент кнопки

HTML-элемент создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.

Категории контента Общий поток (en-US) , текстовый контент (en-US) , интерактивный контент (en-US) , listed (en-US) , labelable (en-US) , и submittable (en-US) form-associated (en-US) элемент, очевидный контент.
Допустимое содержимое Текстовый контент (en-US) .
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент с поддержкой текстового контента (en-US) .
Допустимые ARIA-роли checkbox , link (en-US) , menuitem (en-US) , menuitemcheckbox (en-US) , menuitemradio (en-US) , radio (en-US) , switch (en-US) , tab (en-US)
DOM-интерфейс HTMLButtonElement

Атрибуты

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

Использование данного атрибута на элементе не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключённое состояние для элемента при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите баг 654072.

Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от ; если отсутствует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключённое состояние для элемента , даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут autocomplete .

Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут action у формы-родителя.

Если button имеет тип submit , то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:

  • application/x-www-form-urlencoded : значение по умолчанию, если атрибут не указан.
  • multipart/form-data : следует использовать это значение, если форма содержит элемент со значением атрибута type file .
  • text/plain Если этот атрибут определён, он переопределяет атрибут enctype у формы-родителя.

Если button имеет тип submit , то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:

  • post : данные формы включаются в тело сообщения и отправляются на сервер.
  • get : данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделённых знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.Если этот атрибут определён, он переопределяет атрибут method у формы-родителя.

Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.Если этот атрибут определён, он переопределяет атрибут novalidate у формы-родителя.

Если button имеет тип submit , этот атрибут является именем или ключевым словом,указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button’s form owner. The following keywords have special meanings:

  • _self : Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
  • _blank : Load the response into a new unnamed browsing context.
  • _parent : Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self .
  • _top : Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self .

Название кнопки, которая отправляется вместе с данными формы.

Устанавливает тип кнопки. Достпуные значения:

  • submit : Кнопка отправляет данные формы на сервер. Это значение по умолчанию, если атрибут не указан или если атрибут динамически изменен на пустое или недопустимое значение.
  • reset : Кнопка сбрасывает все элементы управления к их начальным значениям. Удаляет данные, введенные в форму.
  • button : Кнопка не имеет поведения по умолчанию. При этом на странице могут быть скрипты, активируемые при возникновении определённых событий на кнопке.
  • menu : Кнопка открывает всплывающее меню, определяемое с помощью соответствующего элемента.

Начальное значение кнопки.

HTML / CSS — добавление иконки к кнопке

И затем укажите, что определенная ширина и фоновое изображение точно так же, как вы делаете с самой кнопкой.

.btn span.icon < background: url(imgs/icon.png) no-repeat; float: left; width: 10px; height: 40px; >

Я не гуру CSS, но с вершины моей головы. Думаю, это должно сработать.
Jeff Treuting 16 авг. 2010, в 03:07
Поделиться
Джефф Т прав.
jessegavin 16 авг. 2010, в 02:28

Может быть, вы хотите попробовать новый / более чистый подход, используя font-awesome. Проверьте мой ответ ниже.

vohrahul 03 фев. 2017, в 13:14

Вот что вы можете сделать, используя библиотеку шрифтов.

button.btn.add::before < font-family: fontAwesome; content: "\f067\00a0"; >button.btn.edit::before < font-family: fontAwesome; content: "\f044\00a0"; >button.btn.save::before < font-family: fontAwesome; content: "\f00c\00a0"; >button.btn.cancel::before
    
Buttons with text


Buttons without text

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

Кнопки – важнейший интерактивный компонент наших сайтов. Именно с их помощью пользователи совершают большинство действий, значит, их дизайн очень важен.

Базовые стили

Начинаем с определения основных стилей для всех кнопок:

Эти свойства не будут изменяться для кнопок разных видов и размеров:

  • position: relative потребуется для позиционирования иконок внутри кнопок;
  • white-space: nowrap запрещает перенос текста подписи на другую строчку;
  • text-decoration: none убирает подчеркивание, так что класс .btn теперь можно устанавливать и для ссылок.

Абстрагирование размера шрифта и величины скругления углов особенно полезно на ранних этапах разработки дизайн-системы, когда изменения вносятся очень часто. Паддинги связаны с основной системой отступов, так что они изменяются автоматически.

Вариации стилей

Чаще всего для кнопок создаются следующие состояния:

  • .btn—primary – базовый стиль активных кнопок;
  • .btn—secondary – дополнительная версия кнопок, предназначенных для менее важных действий, хорошо сочетающаяся с основной ( primary ) или акцентной ( accent );
  • . btn—accent – используется для выделения кнопок с действиями, требующими повышенного внимания пользователя (например, удаление);
  • .btn[disabled] – указывает пользователю, что кнопка неактивна.

Все цвета определяются в отдельном файле _colors.scss . Подробнее о работе с цветами и темами в дизайн-системе вы можете прочитать в третьей статье серии.
Добавим в этот файл цвета для кнопок:

Миксин fontSmooth предназначен для улучшения рендеринга шрифтов при использовании светлого текста на темном фоне. Этот стиль используется довольно часто для разных элементов, поэтому его стоит вынести в отдельный миксин.

Здесь нет мелких несущественных стилевых деталей вроде теней или состояния при фокусировке. Они уникальны для каждого проекта, поэтому нет смысла включать их в саму дизайн-систему – их следует настраивать поверх нее.

Размеры

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

Хороший подход: определить переменные размера с помощью calc() .

Кнопки с иконками

В предыдущей статье серии мы разобрались с выравниванием иконок и текста. Тот же самый класс .icon-text-aligner можно использовать для выравнивания подписей и иконок внутри кнопок.

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

Группы кнопок

В основной CSS-файл также стоит включить стили для кнопочных групп. К счастью, Flexbox-модель позволяет легко располагать элементы в одном измерении:

Отзывчивые кнопки

Вся наша дизайн-система, описанная в предыдущих статьях, основана на относительных единицах em и двух CSS-переменных: —text-base-size и —space-unit . Если обновить их в медиа-запросе, сработает каскадный эффект для всех элементов, включая кнопки. Поэтому нет необходимости создавать дополнительные запросы для в файле _buttons.scss .

_buttons.scss

В итоге у нас получился вот такой глобальный SCSS-файл для кнопок:

Заключение

Это последняя статья из серии, посвященной созданию дизайн-системы CodyHouse. Библиотеку компонентов целиком вы можете найти здесь.

Создание кнопок со значками, но без изображений с использованием CSS

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

В этих списках мы смогли найти разные коды, которые могут пригодиться на веб-сайте.

Теперь, когда уже выбраны подходящие символы, мы покажем, как разместить их в кнопке, используя только код CSS и псевдокласс :before для добавления содержимого к элементу класса.

Создание кнопки

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

Скопируйте код CSS для кнопки, расположенный ниже:

Добавление псевдокласса :before

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

Все, что нам нужно сейчас, — добавить внешние и внутренние отступы, чтобы расположить псевдокласс :before правильно.

Скопируйте код CSS ниже для псевдокласса :before:

Теперь, чтобы поместить значок на кнопку, нам нужно добавить в код CSS свойство содержимого.

Задав свойство содержимого псевдоклассу :before, мы можем создать новые классы CSS для разных символов, которые мы хотим использовать.

Ниже находятся разные значки, которые показались нам интересными для кнопок на чистом CSS.

Кнопки с формами

Кнопка, Добавить, Редактировать, Удалить, Сохранить, Письмо, Крест.

Вот кнопки, которые можно использовать для форм:

Кнопки с валютами

Доллар, Евро, Цент, Фунт.

Если нужно отобразить символы валют на кнопках:

Кнопки с температурой

Для отображения символов для температуры по Цельсию и Фаренгейту:

Кнопки с математическими символами

Число пи, одна треть, две трети, одна пятая, две пятых, три пятых, четыре пятых, одна шестая, пять шестых, одна восьмая, три восьмых, пять восьмых, семь восьмых, четверть, половина, три четверти.

Есть много математических символов, это те, которые показались нам полезными:

Кнопки со стрелочками

Стрелочка влево, Стрелочка вверх, Стрелочка вправо, Стрелочка вниз, Стрелочка влево вверх, Стрелочка вправо вверх, Стрелочка влево вниз, Стрелочка вправо вниз, Далее.

Можно использовать разные типы стрелочек:

Кнопки с различными символами

Нравится, Звезда, Искра, Воспроизвести, Снег, Черное солнце, Облако, Зонт, Снеговик, Черная звезда, Белая Звезда, Черный телефон, Косой крест, Горячий напиток, Череп, Радиоактивность, Биологическая опасность, Мир, Инь и Ян, Хмурое лицо, Улыбающееся лицо, Первая четверть луны, Последняя четверть луны, Инвалидная коляска, Переработка, Переработка на черном фоне, Нота, Предупреждение, Мужской и женский символы, Ножницы.

Значков очень много, нам показались интересными следующие:

Посмотрите на странице с демонстрацией работы, как выглядят значки в браузере.

Размещение иконок на странице сайта. Делать проще, поддерживать легче

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

Это стандартная форма описания кнопки. Я сам долгое время примерно так писал свой код. Данное написание особо практикуется теми, кто использует готовые иконочные шрифты на подобии FontAwesome
Небольшие трудности возникают если текст должен быть по центру, а иконка несколько смещена относительно текста. Но всё это прекрасно решаемо через свойство position:absolute; задаваемое иконке. Также бывают проблемы с позиционированием данной иконки при адаптивности кнопки, но это другая история.

Теперь я хотел бы описать свой метод оформления иконок в тексте страници (на примере всё того же FontAwesome).

Преимущества такого описания.

1) Кода стало меньше. (Это существенно облегчит вам жизнь на масштабных проектах).

2) Код стал семантически более верным. Если div(или любой другой тег) функционально у Вас выполняет назначение кнопки, то и делайте его через тег button *Иначе возможны проблемы, особенно с Apple устройствами для которых придется прописывать type=«button» для вашего не правильного тега.

3) span размещенный внутри button всегда выравнивается по центру. (*Можно сменить ему display: если вам важны внутренне отступы).

4) Как вы могли заметить, вся суть моего оформления в том что я выношу изображение иконки через псевдо класс :before (:after) и позиционирую его абсолютно. При этом у его родителя span установлен position:relative; (! Важно, чтобы для иконки присваивался отдельный класс).

5) Иконка будет всегда на своем месте относительно span, даже если у вас предусмотрена смена языка, и скажем, в другом языке данное слово могло бы визуально перекрыть иконку.

6) Иконки, оформленные таким образом легко менять, особенно если вы используете препроцессоры (SASS, SCSS, LESS. ), просто добавь нужный класс к нужному элементу.

Недостатки такого описания: (а куда же без них).

1) При использовании тега button довольно часто приходится сбрасывать или переопределять стили, иначе выглядит не очень.

2) Для каждого родительского (span) допустимо одновременно отображать только две иконки, собственно на псевдокласс :before и :after.

3) Если вы, как и я, довольно часто в своих работах используете FontAwesome, вам чаще придется посещать их официальный сайт, что бы выучить Unicode каждой иконки

Это несколько сложнее чем просто прописать классы fa fa-bars. Здесь есть и полный список иконок

4) Поскольку я в написании своего CSS стараюсь придерживаться методологии, то у меня для родительского элемента может быть и довольно много классов

Кнопки с иконками и эффектом на CSS

Кнопки с иконками и эффектом на CSS

Где по умолчанию идет небольшой обвод в светло зеленой тоне, то есть и другая палитра, которая изначально стоит на функций, это выйти сайта. Там вы видим при наведении клика появляется аналогичный дизайн, но только палитра цвета больше идет под алый оттенок цвета. Что дает больше направлений в установочном порядке под различный функции для сайта.

Также не забываем, что если у вас не установлены кнопки, то нужно подключить шрифтовые иконки от font-awesome, которые отлично отображаются в центре элемента. Их аналогичным способом можно настраивать под свой дизайн сайта, это сделать более тёмная или светлее, так как при появлении эффекта они также становятся ярче, ведь по умолчанию веб-разработчик выставлял под темной формат сайта.

Рассмотрим признак работы, где проверено на работоспособность:

1. При открытие сайта или страницы, где находятся кнопки.

Красивые кнопки для сайта

2. Здесь видим, что появляться зеленая палитра, которая идет почти на полный функционал.

Простая HTML кнопка для сайта

3. Кроме одного, что касается выхода сайта, но если рассматривая мини профиль.

Создаем красивые кнопки для сайта с помощью CSS

Установочный процесс:

span.kudem-lacaged
span.kudem-lacaged ul
span.kudem-lacaged ul li
span.kudem-lacaged ul li a

span.kudem-lacaged ul li a:before
span.kudem-lacaged ul li a.usernonesiti:before
span.kudem-lacaged ul li a:hover:before
span.kudem-lacaged ul li a:hover

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

Похожие публикации:

  1. Как задать бэкграунд в css
  2. Как задать прозрачный фон в css
  3. Как удалить node js windows 10
  4. Как указать длину border css

Добавить значок SVG в кнопку с CSS / HTML?

Но значок просто отображается повсюду по-настоящему крупным, как я могу заставить его поместиться внутри кнопки?

Mikael 21 дек. 2015, в 11:51
Поделиться

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

JosephGarrone 21 дек. 2015, в 10:27
Лично я бы использовал это как data-uri, background-image. Встроенный просто . выглядит странно?
Bram Vanroy 21 дек. 2015, в 10:39

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

Pmpr 06 фев. 2016, в 14:09
Показать ещё 1 комментарий
Поделиться:

5 ответов

Лучший ответ

Не уверен, что кнопка не закрыта или вы просто скопировали ее здесь и забыли закрыть ее.

#search-button < width: 100px; height: 50px; >#search-button svg

shadeed9 21 дек. 2015, в 12:29
Поделиться

svg будет наследовать ширину своего родителя (поведение, наблюдаемое в Google Chrome). не должно быть необходимости указывать его ширину и высоту в дополнение к родительской высоте. установите ширину и высоту родителя в соответствии с шириной и высотой svg. в Chrome ширина и высота на уровне SVG полностью игнорируются.

A-Dubb 08 июнь 2016, в 04:57

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

bpscott 12 янв. 2017, в 14:19

Я немного изменил ваш код, поставив его на этот скрипт.

  • Вы не закрыли свой button правильно, ему нужно завершить после SVG
  • Вам нужно было указать ширину кнопки (как вы можете видеть, я остановил некоторые из ваших других CSS)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *