5549 sujets

Sémantique web et HTML

Problème affichage icone

Bonjour,

Il y a des carrés qui s'affichent à la place des icones dans mon menu.

upload/1633031445-73408-menu.jpg

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
Modérateur
Salut,

Si tu vas voir le fichier que tu importe : https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css

Tu verras qu'il n'y a nul part de @font-face ou de font-familly... en gros il défini toutes les classes mais il ne défini pas la font a utiliser.

Sur leur site, FontAwesome préconise d'insérer un script js pour que ca fonctionne et non juste le CSS.

Et sinon je te conseille de passer par la version locale et de ne pas t'embeter avec des leins CDN : https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Au passage tu as plusieurs erreur dans ton code :

ligne 5 : un </i> en trop
</i></li>


Ligne 12/13 : les fermetures de div et nav sont inversées

bonne journée
Modérateur
_laurent a écrit :
Salut,
....

Sur leur site, FontAwesome préconise d'insérer un script js pour que ca fonctionne et non juste le CSS.

Et sinon je te conseille de passer par la version locale et de ne pas t’embêter avec des liens CDN : https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

bonne journée


ça dépend si il veut utiliser la version gratuite ou pas et d'où le script est chargé Smiley smile

Sur le lien de https://cdnjs.com/ pour fontawesome 5.15.4 à https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css on y trouve bien les font-family . (par contre elles ne sont pas déclarées si utilisé autrement qu'avec ces class ou dans un pseudo élément, auquel cas il faut les redéclarer, @max17 : pas ton cas apparemment.
.fab {
  font-family: "Font Awesome 5 Brands";/* payantes */
}
.fa,
.far,
.fas {
  font-family: "Font Awesome 5 Free"; /* gratuite */
}


Cdt
GC

ex: https://jsfiddle.net/fwzdcs1j/
Modifié par gcyrillus (01 Oct 2021 - 21:43)
J'ai remplacé le lien par https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css mais les icones sont collées au texte upload/1633208101-73408-menu.jpg

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>

Modifié par Max17 (02 Oct 2021 - 23:07)
Modérateur
Max17 a écrit :
J'ai remplacé le lien par https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css mais les icônes sont collées au texte upload/1633208101-73408-menu.jpg

j'ai ajouté ceci à mon css : 
.bar-menu .fa{
  margin-right: 8px;
}


Bonjour,
par défaut <i> est en display:inline; pour ton icône et les marges ne sont pas applicables sur ce type de display.

Dans ton code elles sont accolées (comme parties d'un même mot) 
<i class="fas fa-user"></i>About Us

Met donc un espace entre l'icône et le mot Smiley smile 
<i class="fas fa-user"></i> About Us

Ensuite, si cette espace est insuffisant, regarde pour un padding ou margin ou même un word-spacing si tu ne souhaite pas modifier le display.

cdt
J'ai remplacé 

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


par 

.bar-menu .fas{
  margin-right: 8px;
}
Sujet clos
Aller à