Comment - Barre de navigation avec icônes
Apprenez à créer un menu de navigation réactif avec des icônes, en utilisant CSS.
Barre de navigation avec icônes
Créer une barre de navigation réactive avec des icônes
Étape 1) Ajoutez du HTML :
Exemple
<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<a class="active" href="#"><i class="fa
fa-fw fa-home"></i>
Home</a>
<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#"><i
class="fa fa-fw fa-user"></i> Login</a>
</div>
Étape 2) Ajoutez CSS :
Exemple
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
/* Navbar links on
mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Current/active navbar link */
.active {
background-color: #04AA6D;
}
/* Add responsiveness - will automatically display the
navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
Conseil : accédez à notre didacticiel CSS Navbar pour en savoir plus sur les barres de navigation.
Conseil : Si vous souhaitez créer une barre de navigation qui ne contient que des icônes, lisez notre didacticiel sur la barre d'icônes .