Доверьте продвижение нам

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Как сделать меню с иконками html css

Views Icon1

Для создания меню с иконками в HTML и CSS можно использовать несколько подходов, некоторые из которых мы рассмотрим ниже.

  1. Использование списков и CSS-свойства background. Создайте список ul с пунктами li внутри тега nav и добавьте классы к каждому пункту иконки, которые вы хотите использовать. В CSS установите background изображения для каждого класса и скорректируйте размер и выравнивание для лучшего отображения.

HTML:

<nav>
  <ul>
    <li class="home"><a href="#">Главная</a></li>
    <li class="about"><a href="#">О нас</a></li>
    <li class="contact"><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

nav .home {
  background: url('url/к_изображению/home.png') no-repeat center;
  width: 40px;
  height: 40px;
  background-size: 100%;
}

nav .about {
  background: url('url/к_изображению/about.png') no-repeat center;
  width: 40px;
  height: 40px;
  background-size: 100%;
}

nav .contact {
  background: url('url/к_изображению/contact.png') no-repeat center;
  width: 40px;
  height: 40px;
  background-size: 100%;
}
  1. Использование CSS-свойства content и псевдоэлемента ::before или ::after. Добавьте псевдоэлементы ::before или ::after для каждого пункта меню и установите background иконку для каждого псевдоэлемента. В CSS установите соответствующее положение и размер для каждого псевдоэлемента.

HTML:

<nav>
  <ul>
    <li><a href="#" data-icon="home">Главная</a></li>
    <li><a href="#" data-icon="about">О нас</a></li>
    <li><a href="#" data-icon="contact">Контакты</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  position: relative;
}

nav li a:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
}

nav li a[data-icon="home"]:before {
  background: url('url/к_изображению/home.png') no-repeat center;
  background-size: 100%;
}

nav li a[data-icon="about"]:before {
  background: url('url/к_изображению/about.png') no-repeat center;
  background-size: 100%;
}

nav li a[data-icon="contact"]:before {
  background: url('url/к_изображению/contact.png') no-repeat center;
  background-size: 100%;
}
  1. Использование фонтовых иконок. Создайте классы для каждой иконки в CSS и используйте фонтовые иконки, такие как Font Awesome, в HTML. В CSS установите желаемый размер для иконок.

HTML:

<nav>
  <ul>
    <li><a href="#"><i class="fas fa-home"></i>Главная</a></li>
    <li><a href="#"><i class="fas fa-info"></i>О нас</a></li>
    <li><a href="#"><i class="fas fa-envelope"></i>Контакты</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

nav a i {
  font-size: 20px;
  margin-right: 5px;
}
  1. Использование SVG-иконок. Создайте svg-маркировку или добавьте svg-иконки внутрь пункта меню при помощи вложенных объектов. В CSS установите необходимый размер для каждой иконки.

HTML:

<nav>
  <ul>
    <li><a href="#"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M9.293 15.707L14.586 10.414 9.293 5.121 7.879 6.535 10.343 9H4.003v2h6.34l-2.464 2.464z"/></svg>Главная</a></li>
    <li><a href="#"><svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 24c-4.36 0-8.276-2.249-10.525-5.666-1.613-2.32-2.475-5.188-2.475-8.334 0-6.627 5.373-12 12-12s12 5.373 12 12c0 3.146-.862 6.014-2.475 8.334C20.276 21.751 16.361 24 12 24zm0-21.8c-5.615
Поделиться:

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.