Добавление и выравнивание иконки в кнопке HTML через CSS

Быстрый ответ

Если нужно быстро прикрепить иконку к <input type="button">, воспользуйтесь свойством background в CSS:

<input type="button" class="icon-btn">

.icon-btn {
  background: url('icon.png') no-repeat center / contain; 
  border: none;
  padding: 10px;
  height: 20px;
  width: 20px;
  cursor: pointer;
}

Пропорции height и width должны соответствовать размерам иконки.

Детали и совместимость: Обеспечим работоспособность кнопки во всех браузерах

Уделите внимание деталям для повышения удобства использования и визуального восприятия.

Регулировка отступов: Выделите пространство для иконки

Чтобы исключить перекрытие текста иконкой, установите большие отступы:

.icon-btn {
  padding-left: 30px;
}

Таким образом Вы обеспечите достаточное пространство как для самой иконки, так и для размера кнопки в целом.

Подробнее об этом расскажет наш спикер на видео

Спрайты: Как справиться с множеством иконок

Если Вам необходимо работать с большим количеством иконок, используйте CSS-спрайты, чтобы сократить количество HTTP-запросов:

.icon-btn {
  background-image: url('icons-sprite.png');
  background-position: -20px 0;
}

Этот метод улучшает производительность и упрощает обслуживание.

Расширенные структуры: Больше возможностей с <button> и <img>

<button class="button-with-img-icon" type="button">
  <img src="icon.png" alt="Описание иконки" height="16" width="16">
  Говорите вслух
</button>

Осуществив редактирование документа с помощью CSS flexbox или CSS grid, мы можем упорядочить размещение иконки и текста.

Визуализация

Добавляя иконку-изображение к кнопке, можно сравнить этот процесс с преобразованием пустого холста в произведение искусства:

До: 🖼 (Пустой холст)

Для трансформации необходимо использовать background-image и небольшие CSS-трансформации:

.button-with-icon {
    background-image: url('icon.png');
    background-repeat: no-repeat;
    background-position: center;
}

И вот результат:

После: 🖼🖌 (Яркая, кликабельная картина)

Преобразование осуществлено с помощью открытых исходников.

Продолжайте улучшать: Совершенствуйте оформление кнопки

Добавление динамичности с помощью псевдоэлементов

.icon-btn:after {
  content: url('icon.png');
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

Такое решение позволяет добавить динамичности и взаимодействия, используя только CSS.

Решаем задачу кроссбраузерности: Обеспечим согласованную работу Opera и Chrome

Проверьте, корректно ли отображаются <input type="button"> и <button> во всех браузерах.

Доступность: Важен каждый клик

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

Полезные материалы

1. The Input (Form Input) element — HTML: HyperText Markup Language | MDN — подробная статья на MDN Web Docs об элементе <input>.
2. How To Create Icon Buttons — практическое руководство от W3Schools по оформлению кнопок с иконками.
3. Icon Fonts are Awesome — обзор шрифтов-иконок на сайте CSS-Tricks.
4. Find Icons with the Perfect Look & Feel | Font Awesome — обширная библиотека иконок Font Awesome.
5. SVG use with External Reference, Take 2 | CSS-Tricks — об использовании SVG для иконок на CSS-Tricks.
6. Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I – A List Apart — о применении SVG в фоновых изображениях на A List Apart.