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

Question

[Елена]

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

Иконку надо вставлять через 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>

Comments

[Елена]

Пашенька, так иконка в формате SVG и все равно не располагается рядом

[Елена]

Пашенька, Или вы имеете ввиду не через background-image ее вставлять?

Answer 1

[Ankhena]

Такие иконки вставляются либо
- фоном для кнопки
- псевдоэлементом
- фоном для псевдоэлемента

Например, фон для псевдо 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;
}

Answer 2

[Вадим]

Если отвечать на поставленный вопрос - то после текста должен идти слот под эту иконку.
Пустой 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>

Comments

[Елена]

Вадим спасибо, попробую сделать так, главное чтоб ревью не офигел от этого)))

[Вадим]

ну, вообще это обычная практика для вставки иконок подобным образом.
А вот к чему должны появиться вопросы - это к инлайну стилей через style.
Я не знаю, проходите ли какой-то курс и прочих вводных. Но стили напрямую задавать элементам - мовитон.
Допускается только в определённых случаях или при острой необходимости.

Для всех остальных случаев - css классы.

[Ankhena]

Вадим,

то после текста должен идти слот под эту иконку

Ага, псевдоэлемент называется.
Зачем плодить не имеющие смысла сущности?

[Елена]

Вадим, да это на скорую руку сделала, чтоб вопрос был понятен, а так конечно через css все делаю и через js. В html нет стилей)

[Вадим]

Ankhena, согласен

[Вадим]

Ankhena, Но тогда Elena0394 нужно обернуть текст внутри кнопки в span и делать ему псевдоэлемент

[Ankhena]

Вадим,

согласен

нужно обернуть текст внутри кнопки в span и делать ему псевдоэлемент

А сказали, что согласны.
И спан лишний )))

Просто кнопка, button, у нее просто фон или просто псевдо.

[Вадим]

Ankhena, Если делать псевдо для всей кнопки, то как Вы предлагаете автору высчитывать позицию иконки, чтоб она была строго после текста? Если текст динамический? Захардкодить то для одной - да, не проблема.

[Ankhena]

Вадим, вообще ::after встает строго после контента. Сам. https://jsfiddle.net/0evdjL8f/

Если вдруг строки 2, то абсолютом или еще проще флексом.
Высчитать паддинг на ширину иконки - ну да, непосильная задача.
Поставить флексами - тоже непосильная.

[Вадим]

Ankhena, ну да, запамятовал уже что оно по дефолту за контентом становится. На флексах самое то

[Ankhena]

Вадим, да, если нужно центрировать, то флексами проще всего.