Для создания меню с иконками в HTML и CSS можно использовать несколько подходов, некоторые из которых мы рассмотрим ниже.
- Использование списков и 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%;
}
- Использование 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%;
}
- Использование фонтовых иконок. Создайте классы для каждой иконки в 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;
}
- Использование 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