Как сверстать этот элемент?

Question

[When you dont want to litter on stackoverflow]

Мне нужно сверстать такой блок.


То есть над иконкой "Почта" должен находиться еще один элемент ( я думаю что для этой цели лучше всего использовать тег <span> ). Проблема в том, что я не знаю как правильно этот <span> спозицинировать. Я пробовал использовать span{position: absolute;}, но спозицинировать элемент с учетом резиновой и при этом адаптивной flex-box ( Bootstrap 4 ) вёрстки мне не удалось.

Comments

[Rustam Bainazarov]

Каким образом резина и responsive могли тут как-то помешать? Покажите код.

[When you dont want to litter on stackoverflow]

Рустам Байназаров, Никаким. Это дополнительная информация, на случай если она кому то будет нужна.

Answer 1

[Антон]

https://jsfiddle.net/Anton_Eridani/L87co90m/5/

Comments

[When you dont want to litter on stackoverflow]

Спасибо. Думаю ваше решение кому то поможет. Я же буду использовать решения Bootstrap.

Answer 2

[Михаил]

Так как ты используешь Bootstrap 4, используй как основу компонент badge.
И поправь под себя его стили.

Comments

[When you dont want to litter on stackoverflow]

Спасибо, раньше почему то я не натыкался на эту страницу в документации. Очень приятно что есть готовое решение этой задачи.