Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour,
Il y a des carrés qui s'affichent à la place des icones dans mon menu.
J'ai ajouté ceci à mon code :
"<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">" (https://www.bootstrapcdn.com/fontawesome/) et "<div class="bar-menu">
<nav>
<ul>
<li class="active"><a href="#"><i class="fas fa-home"></i>Home</a></li>
<li><a href="#"><i class="fas fa-user"></i>About Us</a></i></li>
<li><a href="#"><i class="fas fa-clone"></i>Services</a></li>
<li><a href="#"><i class="fas fa-users"></i>Clients</a></li>
<li><a href="#"><i class="fas fa-tags"></i>Prix</a></li>
<li><a href="#"><i class="fas fa-edit"></i>Design</a></li>
<li><a href="#"><i class="fas fa-phone"></i>Contact</a></li>
</ul>
</div>
</nav>" (https://fontawesome.com/v5.15/icons/home?style=solid) pour les icones
4 réponses
Ton cdn ne marche pas, essai avec lui la :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Merci ça marche !
j'ai juste remplacé le lien de href par "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" mais les icones sont collées au texte
j'ai ajouté ceci à mon css :
.bar-menu .fa{
margin-right: 8px;
}
pour que les icones soient plus espacées, puis j'ai modifié mon code html et le meme problème est reapparu (icones collées)
mon code html :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Accueil</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="bar-menu">
<nav>
<ul>
<li class="active"><a href="#"><i class="fas fa-home"></i>Home</a></li>
<li><a href="#"><i class="fas fa-user"></i>About Us</a>
<div class="sous-menu1">
<ul>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
</ul>
</div>
</li>
<li><a href="#"><i class="fas fa-clone"></i>Services</a>
<div class="sous-menu1">
<ul>
<li><a href="#">bbbbb</a></li>
<li class="hover-me"><a href="#">bbbbb</a><i class="fas fa-angle-right"></i>
<div class="sous-menu2">
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Emial</a></li>
</ul>
</div>
</li>
<li class="hover-me"><a href="#">Mibile App</a><i class="fas fa-angle-right"></i>
<div class="sous-menu2">
<ul>
<li><a href="#">Android</a></li>
<li><a href="#">IOS</a></li>
<li><a href="#">Ionic</a></li>
<li><a href="#">o</a></li>
<li><a href="#">o</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#"><i class="fas fa-users"></i>Clients</a></li>
<li><a href="#"><i class="fas fa-tags"></i>Prix</a></li>
<li><a href="#"><i class="fas fa-edit"></i>Design</a></li>
<li><a href="#"><i class="fas fa-phone"></i>Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
C'est normal, tu cibles les élements qui ont la classe "fa" hors la, tu a choisi les icones "solid" donc avec la class "fas" et pas "fa".
Donc soit tu cible les élements html <i> soit tu cible les éléments avec la classe "fas"