Pourquoi mes icônes Font Awesome s'affichent-elles sous forme de carrés au lieu de symboles ?

Font Awesome n'affiche pas les icônes comme prévu : des carrés apparaissent à la place

L'intégration d'icônes Font Awesome dans votre conception Web peut être frustrante lorsque les symboles apparaissent comme carrés vides. Ce problème survient souvent en raison d'une implémentation incorrecte des classes Font Awesome.

Comment inclure des fichiers Font Awesome

Le code HTML que vous avez fourni inclut les fichiers CSS nécessaires pour Font Génial :

<link rel="stylesheet" href="css/font-awesome.css">

Erreur : classe manquante

Votre code utilise une classe d'icône incomplète :

<i class="icon-camera-retro"></i>

Pour afficher l'icône correctement, vous avez besoin de deux classes : la classe fa et la classe qui spécifie l'icône, comme fa-camera-retro.

Mise en œuvre correcte

<i class="fa fa-camera-retro"></i>

Bootstrap 5 Mise à jour

Dans Bootstrap 5, le préfixe fa est obsolète. La nouvelle valeur par défaut est le fas (style solide) et le fab (style de marque) :

<i class="fas fa-camera-retro"></i>  <!-- Solid icon -->
<i class="fab fa-twitter"></i>        <!-- Brand icon -->

En appliquant les classes appropriées, les icônes Font Awesome s'afficheront comme prévu, éliminant les carrés gênants qui gênaient auparavant votre conception. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!