Как добавить иконку внутрь кнопки с помощью HTML и CSS?

Рейтинг: 0Ответов: 2Опубликовано: 03.05.2023

Как добавить иконку в формате PNG или SVG внутрь кнопки силами HTML и CSS?

css html button png icon
Источник: Stack Overflow на русском

Ответы

▲ 3

Или спрайтом( 1 вариант ) , или просто картинкой ( 2 вариант )

<button class="header__btn-log">
    <svg class="header__btn__logo">
        <use xlink:href="../img/icons/icons.svg#login"></use>
    </svg>
    Login
</button>
<button class="header__btn">
    <img class="header__btn__logo-test" src="../img/try2.png">
    </img>
    Try for free
</button>
▲ 2

Как добавить иконку в формате PNG или SVG внутрь кнопки силами HTML и CSS?

Например вот так. +/- по координатам, отступам и размеру...

button {
  position: relative;
  padding-left: 25px;
}
button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url(https://javascript.ru/forum/images/icons/icon7.gif) center no-repeat;
}
<button>Тест</button>