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

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


Ответы (2 шт):

Автор решения: And So What

Или спрайтом( 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>
→ Ссылка
Автор решения: ksa

Как добавить иконку в формате 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>

→ Ссылка