Problème affichage icone

30 septembre 2021 à 21:37:32

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

-
Edité par Max123456 30 septembre 2021 à 21:43:59

Lord Morpheus

30 septembre 2021 à 22:08:05

Bonsoir,

Il nous faut l'intégralité de ton code pour pouvoir correctement t'aider et trouver ce qui ne vas pas. Plus particulièrement ce qu'il y a entre ta balise <head>. Mais n'ai pas peur de poster tout ton HTML!

De ce que tu montres actuellement, rien ne cloche. Ah si, tu ferme ta <div> trop tôt! Il faut que tu la fermes après ta <nav>, mais ce n'est pas ce qui vas résoudre ton problème d'icône. Et pour faire plus propre et surtout plus correct, n'oublie pas l'attribut title sur tes ancres <a>!

Et indent correctement ton code! Quand tu arrivera à 2000 ligne, tu sera bien content d'avoir quelque chose de propre. Et si tu as la flemme, les IDE peuvent faire ça automatiquement (ou bien des générateur d'indentation de code sur le web)

-
Edité par Lord Morpheus 30 septembre 2021 à 22:09:28

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Max123456

30 septembre 2021 à 22:20:14

Merci pour ta réponse ! J'ai changé quelque trucs et j'ai mis le code entier.

<!DOCTYPE html>
<html>
<head>
	<title>Accueil</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.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></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>
    </nav>
    </div>

	<p>texte</p>
	<p><a href="page1.html">texte lien</a></p>
</body>

</html>

Lord Morpheus

30 septembre 2021 à 22:57:54

Alors, je ne connais pas bien Font Awesome mais tu ne sembles pas charger le bon css, du moins, il te manque une partie.

Essaye plutôt avec celui-ci : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

CF : https://cdnjs.com/libraries/font-awesome/5.15.4

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Max123456

2 octobre 2021 à 23:03:20

Merci ça fonctionne !

les icones sont collées au texte, j'ai donc 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>

-
Edité par Max123456 2 octobre 2021 à 23:08:03

Lord Morpheus

2 octobre 2021 à 23:53:02

Tout simplement parce que ceci est faux :

.bar-menu .fa{
  margin-right: 8px;
}

Tu n'as aucun élément avec la class .fa

C'est plutôt .fas, non? Si tes ancres <a> ne sont pas en display: flex, tu pouvais aussi simplement mettre un espace dans ton html :

<a href="#"><i class="fas fa-home"></i> Home</a>

Et par pitié, indent ton code : https://www.freeformatter.com/html-formatter.html

-
Edité par Lord Morpheus 3 octobre 2021 à 3:51:13

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

AbcAbc6

3 octobre 2021 à 2:28:15

Lord Morpheus a écrit:

N'oublie pas l'attribut title obligatoire sur tes ancres <a>.

Bonsoir, heu... Désolé mais l'attribut title n'est en rien obligatoire. Il fait partie des attributs globaux ou universels. Le validateur ne dit rien en son absence.

Lord Morpheus

3 octobre 2021 à 3:50:50

AbcAbc6 a écrit:

Bonsoir, heu... Désolé mais l'attribut title n'est en rien obligatoire. Il fait partie des attributs globaux ou universels. Le validateur ne dit rien en son absence.

Tu as raison, ce n'est pas obligatoire! Je sais pas pourquoi j'avais ça en tête...

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil