Ferzet
@Ferzet

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

Привет всем! Я начинающий верстальщик.
Как наиболее правильно сделать горизонтальное меню с иконками? Все иконки объедены в спрайт.
Как нужно:
afa2f6322e0e4609aaae8cb8730cef4e.png
<nav class="nav-top">
    <a class="nav-top__link" href="#">Главная</a>
    <a class="nav-top__link" href="#">Чекеры</a>
</nav>

+sprite 826b7f0d9939448a9fcc3671d2ad7fd6.png

Я не понимаю как добавить этот спрайт и расположить каждому пункту свою иконку? Нужен ли для этого дополнительный блок? Спасибо.
  • Вопрос задан
  • 272 просмотра
Пригласить эксперта
Ответы на вопрос 5
aliencash
@aliencash
Партизан
Ответ написан
Комментировать
@zhainar
Гуглю за вас
Нужен блок с фиксированными размерами, diplay: inline-block и background-image, background-position.
Ответ написан
Комментировать
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
Посмотри в меню тостера - сделай также и не парься.
Ответ написан
Комментировать
@LiguidCool
Берётся блок фиксированной ширины и высоты. Ему на фон задается спрайт. Положением фона выбирается какую из картинок отображать.
Ответ написан
Комментировать
ogarich89
@ogarich89
Front-End Developer
Советую тебе изучить фреймворк compassCSS

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

https://www.youtube.com/user/uwebdesign/search?que...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы