Как правильнее на css реализовать меню с разными иконками?

Question

[Думай Головой]

Сделать для каждого пункта меню свой класс (который в проекте вообще нигде больше не будет использоваться, кроме как для этого пункта) и в css добавить background-image мне кажется топорным решением

<ul class="menu">
    <li class="menu-item-1"><a href="#">Item-1</a></li>
    <li class="menu-item-2"><a href="#">Item-2</a></li>
    <li class="menu-item-3"><a href="#">Item-3</a></li>
    <li class="menu-item-4"><a href="#">Item-4</a></li>
    <li class="menu-item-5"><a href="#">Item-5</a></li>
</ul>

.menu li {
    background-image: url("sprite.png");
    background-repeat: no-repeat;
}

.menu-item-1 {
    background-position: x y
}
.menu-item-2 {
    background-position: x y
}
.menu-item-3 {
    background-position: x y
}
.menu-item-4 {
    background-position: x y
}
.menu-item-5 {
    background-position: x y
}

Можно ли как то поинтереснее / правильнее?
ps: да, я перфекционист)

Answer 1

[Александр Зачиналов]

можно применить псевдокласс nth-child, но такое решение будет поддерживаться в меньшем кол-ве браузеров

Comments

[Алексей Уколов]

Все современные, и ИЕ9+ - https://developer.mozilla.org/en-US/docs/Web/CSS/:...

[Александр Зачиналов]

спасибо за уточнения, конечно

Answer 2

[Евгений]

Шрифт, как это сделано, к примеру, в bootstrap, но так как у вас не чуть не хуже.

Comments

[Думай Головой]

Евгений кстати да, но фонтогенераторы выдают только чёрное белые иконки вроде, если им сувать свои картинки. а мне нужны цветные

[Евгений]

Думай Головой: тогда только так будет наиболее правильно, сделайте картинку в один столбец/строку, чтобы для удобства, чтобы менять только 1 координату. Если нужен масштабируемый вектор, то лучше использовать svg через use.

Answer 3

[Алексей Уколов]

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

Comments

[Думай Головой]

Алексей Уколов
я вот сейчас посмотрел проект, и понял, что иконки (не только в меню) одноцветные (флэт) и наверное вообще имеет смысл состряпать свой иконочный шрифт

Answer 4

[Павел Гоголинский]

Можно картинки вставлять

<li><a href="#"><img src="img1.png"/> Item-1</a></li>
<li><a href="#"><img src="img2.png"/> Item-2</a></li>

Comments

[Думай Головой]

Павел Гоголинский По тз нельзя. Закзачик прошареный и говорит только через css, мол картинку могут скопировать. (он не понимает, что через css тоже можно скопировать)

[Думай Головой]

И что иконки это не такой уж и дифицит нынче, боится что украдут)