Как правильнее будет сделать эту иконку с точки зрения семантики?

Question

[Роман]

Есть у меня список преимуществ: как сделать картинки правильным семантическим путем? Друг мне говорил делай img и не парься, хотя не думаю что делать img это правильно, на некоторых сайтах видел что такие иконки делались дивом которому был прописан background-image , на других через ::before и ::after , так как же правильнее будет сделать, чтоб например на будущее на собеседовании мне не читали лекции, что типа: "Так иконки никто не делает"...
Или не задумываться на счет этого и делать div>img , диву сделать border и выровнять картинку например флексом? Хочу услышать мнение профи.

Comments

[Rustam Bainazarov]

Да хоть inline-svg, хоть div, хоть img. Если img, можете поставить ему атрибут role="presentation", чтобы быть блатным хакером.

Я бы делал inline-svg или через #use внутри div'а, который будет рамкой. Либо рамку сразу в инонку.

[KononovD]

Можно в inkscape запилить свг-иконки, а потом в шрифт преобразовать и будет кастомный иконочный шрифт.
Мне кажется, это более профессиональный подход.
(только тогда нельзя будет сделать разные цвета иконке)

А вообще, я бы сделал эту иконку дивом, рамку задал через бордер, а иконку через бекграунд.
(я не профи)))

[Rustam Bainazarov]

BD_ l3ftoverZ!, да и пофиг, никогда неё испытывал проблем с этим. Зато можно ими манипулировать как угодно. Даже на «Тостере» они так сделаны. Да и DOM обычно в таких случаях очень простой выходит — двухуровневый (svg > path).

[alex-1917]

SmthTo,

Даже на «Тостере» они так сделаны

бгггг

никогда неё испытывал проблем с этим

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

[alex-1917]

BD_ l3ftoverZ!,

инлайновые SVG иконки - плохо.

да как так??
как так-то??!!
это же модно стильно молодежно!...
)))

[Rustam Bainazarov]

alex-1917, опять вы :))

Если бы не доросли, то я не видел бы свои 5–6 тысяч долларов. Ничего там не тормозит на таких простых иконках, это мы тоже обсуждали :))

P. S. И да, кстати, того самого брейкпоинта в моём сообщении всё же не было, вы просто прочитали невнимательно.

[Rustam Bainazarov]

alex-1917, ну вот открыл я на iPhone 6 вот этот сайт:
https://glyph.smarticons.co

Тут 800 inline-svg иконок, и ничего не глючит. На iPhone X и Meizu 16th тоже не глючит.

[alex-1917]

SmthTo,

5–6 тысяч

плюс один самозанятый, ок)))

[alex-1917]

SmthTo,
Тут 800 inline-svg иконок
надо ж смотреть, как они выгружаются, вряд ли все 800 элементов в исходном коде, хотя если смазать кокосовым маслом...
)))

[Rustam Bainazarov]

alex-1917, нет, просто з/п зависит от количества сделанного.

Они выгружаются сразу.

Answer 1

[arzamas-nick]

На мой взгляд правильней будет через "::before и ::after". Не нужно лишний div создавать и тем более использовать тег img для этого иконки в данном случае декоративные.