Как задавать иконки для элементов?

Question

[vvanyazz]

У меня есть иконки, и 5 пунктов меню, для каждого пункта своя иконка, как я знаю иконки - декоративные элементы, поэтому я задаю их для элементов через css, before, так как задать каждому элементу свою иконку если у них одинаковые классы?

Comments

[secretsergey]

<i class="icon-wind"></i>
Вставить в каждый пункт меню с прописыванием стилей в css.

[Ankhena]

Очевидно, задать им еще по второму уникальному классу.
Потому что вряд ли иконка зависит от порядка следования элементов, а не от смысла.

Либо вставлять их как img с aria-hidden

[vvanyazz]

Ankhena, а как по бэму нормально называть этот класс? Понятно что это будет модификтор но именно название брать типо 01, 02 или же описывать смысл иконки типо header__item--shop?

[Ankhena]

vvanyazz, ещё раз перечитайте, пожалуйста, фразу

Потому что вряд ли иконка зависит от порядка следования элементов, а не от смысла.

Она ответит и на этот ваш вопрос.

Ведь будет очень странно, если у 5го пункта меню окажется модификатор --03?

[strelok011]

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

Может бэкенд вам возвращает набор полей и вы генерите разметку на фронте, может разметка собирается на php на бэкенде и там можно весь гемморой переложить на плечи бэкенд программиста... Надо ли вам делать адаптив, надо ли делать изменяемые размеры у иконок, надо ли делать ховер со сменой картинки, либо ховер со сменой цвета, монохромные ли у вас иконки, векторные или нарезка из пнг..., собраны ли они в спрайты...
Сейчас все предложения высосаны из пальца "как бы сделал я для себя".

[Ankhena]

Бэкэнд тоже можно изменить...
Или использовать полученное как угодно, например, как data-

Answer 1

[michaelvovk]

варианты:
1. назначить каждому элементу свой класс и прописать свою иконку :before
2. использовать псевдоклассы nth-child(1-...)
3. вставить иконку не через :before, а в html каждому элементу