Почему рекомендуют вставлять иконки так?

Question

[LolExtasy]

Привет! На просторах интернета рекомендуют вставлять иконки по типо картинки снизу через псевдоэлементы, для чего это нужно? Что будет если я вставлю с тегом img? Есть ли какие-то ресурсы чтоб почитать об этом?

Comments

[Ankhena]

Есть мнение, что img это контентное, т.е. имеющее смысл изображение, при потере которого часть этого смысла потеряется.

А иконки это просто украшение, т.е. в разметке их быть не должно, они не должны воспроизводится читалками.

Конечно, можно использовать всякие aria- и role, если вдруг эти иконки вставляются через админку клиентом.

Т.е. если от страницы отключить стили, то страница должна быть читаема и понятна (т.е. заголовки выглядят заголовками, списки списками, абзацы разделены и т.д.) и не должно быть лишнего. В разметке - смысл, в стилях- украшения, скрипты в скриптах, а не всё в кучу.

В современном мире эти иконки вообще будут векторным спрайтом ;)

[LolExtasy]

Ankhena, Простите, получается если я натягиваю на вп, стоит эти картинки как img вставлять?

[Ankhena]

LolExtasy, если клиенту нужна возможность их редактировать (я бы отказала), то можно как img. Только задав атрибут aria-hidden="true"

Но можно записывать в атрибут style и использовать как кастомное свойство.
https://jsfiddle.net/t8pcn2d0/

Answer 1

[alphatom]

Да в принципе нет никакой разницы. Если как img вставите то эту картинку можно будет мышкой захватить и она в верстке будет видна. Если через css в псевдоэлемент добавите то нельзя будет такую картинку мышкой перетаскивать и она коде страницы ее не будет (только в CSS).

Часто иконки вставляют через специальные шрифты с иконками (например Bootstrap Icons), но тогда символы это не картинки а глифы шрифта. Те у вас в принципе нет опции вставить символ шрифта как картинку. Шрифты удобно потому что все иконки в одном файле находятся и так как это шрифт к ним можно применять свойства css для шрифтов. Те цвет, размер и тп. С картинками прийдется или грузить каждую отдельно или создавать из них атлас и потом все равно вставлять через css чтобы выставить на картинке позицию вашей иконки – что очень не удобно.

В общем если у вас супер кастомные картинки которых мало можете вставлять их как img, Если это набор иконок в нете лучше использовать вставку через шрифт через псевжоэлемент.