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

Question

[Ferzet]

Привет всем! Я начинающий верстальщик.
Как наиболее правильно сделать горизонтальное меню с иконками? Все иконки объедены в спрайт.
Как нужно:

<nav class="nav-top">
    <a class="nav-top__link" href="#">Главная</a>
    <a class="nav-top__link" href="#">Чекеры</a>
</nav>

+sprite

Я не понимаю как добавить этот спрайт и расположить каждому пункту свою иконку? Нужен ли для этого дополнительный блок? Спасибо.

Answer 1

[Андрей Федоров]

Типа того codepen.io/aliencash/pen/OXGQpV

Answer 2

[Zhainar]

Нужен блок с фиксированными размерами, diplay: inline-block и background-image, background-position.

Answer 3

[Pretor DH]

Посмотри в меню тостера - сделай также и не парься.

Answer 4

[Иван]

Берётся блок фиксированной ширины и высоты. Ему на фон задается спрайт. Положением фона выбирается какую из картинок отображать.

Answer 5

[Роман Огарков]

Советую тебе изучить фреймворк compassCSS

Очень мощный инструмент. Генерация спрайтов, вертикальный ритм, resetCSS, работа с типографией и ещё много крутых плюшек.

https://www.youtube.com/user/uwebdesign/search?que...