@Elena0394

Как в кнопке располагать иконку рядом с текстом?

Всем привет! Как в кнопке располагать иконку рядом с текстом?
5f9826f96c3e7723106022.png
Иконку надо вставлять через background-image, и это вызывает проблему. Через img проблем нет, но если делать через тег img, будет ведь неправильно т.к. иконка не несет какой-либо значимости. Как быть в такой ситуации? Может через background-image можно реализовать?
<div style="width: 100%; background-color: #fff;">
	<button style="width: 100%;height: 50px;background-size: 20px 20px;
	background-repeat: no-repeat; background-position: right 0 center;
	background-image: url(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);">Зарегистрироваться</button>
</div>
  • Вопрос задан
  • 129 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Такие иконки вставляются либо
- фоном для кнопки
- псевдоэлементом
- фоном для псевдоэлемента

Например, фон для псевдо https://jsfiddle.net/uhs2Lqty/
Или просто фон https://jsfiddle.net/vez5ot1m/
Если есть шанс, что текста будет больше, чем на 1 строку, то флексами https://jsfiddle.net/80kLaygo/ или абсолютом https://jsfiddle.net/fn9p3zed/
spoiler

button

.btn::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-left: 0.3em;
background: violet url('тут-картинка') no-repeat center / contain;
}
Ответ написан
@MrDecoy
Верставший фронтендер
Если отвечать на поставленный вопрос - то после текста должен идти слот под эту иконку.
Пустой div, у которого и будет этот background указан.
Таким образом, div всегда будет идти строго за текстом. Вы сможете задать ему отступ от текста, размеры, и прочие стили.

div а не span просто потому что span всё таки обёртка для текста. А иконка это не текст.

<div style="width: 100%; background-color: #fff;">
  <button style="width: 100%;height: 50px;">
    Зарегистрироваться
    <div style="background-size: 20px 20px;background-repeat: no-repeat; background-position: right 0 center;background-image: url(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);"></div>
  </button>
</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы