Как сделать текст внизу иконки html?

Question

[maksim44454556]

<div class="right_submenu">
            <button class="btn"><img src="./Vector.png"/> Профиль</button>      
            <button class="btn"><i class="material-icons">favorite_border</i>Избранное</button>
            <button class="btn"><i class="material-icons">shopping_cart</i>Корзина</button>
 </div>

Comments

[Ankhena]

Нарисовать в фотошопе?

Вы бы как-то уточнили вопрос чтоль...
Если речь про html, то выкладывайте ваш код в песочницу и рассказывайте что пробовали и что не получилось.

Answer 1

[Владимир Коротенко]

Используйте псевдоэлемент after, либо усложните разметку и создайте контейнер с иконкой и лейблом

Comments

[Рональд Макдональд]

Да вы медиум.

[Владимир Коротенко]

Рональд Макдональд, капитан очевидность скорее

[Ankhena]

Я бы не стала, на всякий случай, употреблять слово лейбл в данном контексте.

[Владимир Коротенко]

Ankhena, значение метка ярлык, причём относится к конкретному элементу причём в некоторых верстках иконки это именно инпуты типа кнопки имеющие идентификатор и вызывающие переход по маршруту. Так что логически и семантически label подойдёт

<div class=iconbox >
<input type=button class=‘fa fa-user id=user >
<label for=user > user label</label>
</div >

[Ankhena]

Владимир Коротенко, а инпут-то откуда прилетел?
У вас какие-то космические знания об этом вопросе :)

Если что, FA делает иконки псевдоэлементом, а у инпутов их нету. (Не смотря на то, что часть браузеров их всё таки рисует)

[Владимир Коротенко]

Ankhena, 4 основных браузера рисуют впрочем лэйбл можно навесить на любой элемент а можно и спан или див. Чем вам лэйбл то не нравится?