TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment réparer les icônes Font Awesome affichées sous forme de boîte?

11

Dans le développement Web, il est courant d’utiliser des icônes de police au format SVG au lieu de saisir des symboles à l’aide d’entités d’échappement. Par exemple, les icônes Font Awesome sont les plus populaires en raison de l’évolutivité des icônes sans perte de qualité. Cependant, si vous n’implémentez pas correctement la police, des icônes impressionnantes s’afficheront sous forme de boîte. Si vous rencontrez des problèmes avec les icônes de police, découvrez comment les résoudre.

Utilisation des icônes Font Awesome dans le site Web

Il existe deux façons d’utiliser les icônes de polices sur votre site Web. L’une consiste à utiliser la balise HTML et l’autre consiste à utiliser des pseudo-classes CSS. Dans les deux méthodes, vous devez lier la police source Awesome CSS et héberger les fichiers de polices sur votre serveur afin que les styles appropriés puissent être appliqués aux icônes. Vous trouverez ci-dessous un exemple d’ utilisation de font Awesome en HTML :

Comment réparer les icônes Font Awesome affichées sous forme de boîte?

Utiliser Font Awesome

Consultez cet article du site officiel pour savoir comment utiliser les icônes de polices sur votre site Web. Lorsqu’il manque quelque chose au chargement, vous verrez la boîte comme ci-dessous à la place de l’icône.

Comment réparer les icônes Font Awesome affichées sous forme de boîte?

Boîte de truie d’icône de police

Pourquoi les icônes Font Awesome s’affichent sous forme de boîte ?

Afin d’insérer une icône de police sur votre site, vous devez disposer des éléments suivants :

  • Hébergez les polices sur votre serveur
  • Lien police correcte version CSS géniale
  • Pas de conflit avec les anciennes et nouvelles versions sur le même site
  • Vérifier la bonne famille de polices
  • Utiliser la classe CSS appropriée
  • Vérifier le poids de la police
  • Vérifier le code de contenu CSS

Laissez-nous vérifier le point de facilité en détail.

1 Héberger des polices sur votre serveur

Afin d’utiliser font Awesome sur votre site Web, il est nécessaire d’héberger les fichiers de polices également dans le même répertoire. Toutes les polices de caractères Web doivent être disponibles dans le dossier "/webfonts" et référencées dans le CSS situé dans le dossier "/css".

Dans la plupart des cas, le thème ou le plugin que vous utilisez installera tous les fichiers CSS et polices nécessaires sur votre serveur. C’est le cas, surtout lorsque vous utilisez WordPress pour votre site Web.

2 Lien vers la version CSS correcte

Font Awesome était disponible gratuitement jusqu’à la version 4.70. Cependant, il existe des versions gratuites et pro disponibles à partir de la version 5.0. Bien que la version 4.70 soit obsolète, la plupart des plugins et thèmes gratuits utilisent toujours la 4.70 en raison de la classe CSS uniforme et de la facilité d’utilisation. Cependant, la version 5.0 a des marques et des styles solides pour les utilisateurs gratuits et vous pouvez utiliser all.css pour inclure les deux styles.

Vous pouvez soit vous inscrire sur le site font Awesome pour obtenir un kit CDN, soit utiliser les fichiers CDN disponibles sur Cloudflare.

Comment réparer les icônes Font Awesome affichées sous forme de boîte?

Obtenez le kit CDN Font Awesome

3 versions CSS conflictuelles

L’un des problèmes auxquels nous avons été confrontés avec un site WordPress est qu’un plugin utilisait la version 4.70 et que le thème utilisait la version 5.0. Cela provoquait le conflit en raison d’une classe CSS et de codes de contenu incompatibles. Par conséquent, assurez-vous d’utiliser la dernière version 5.0 avec le fichier source CSS approprié sur votre site.

Comment réparer les icônes Font Awesome affichées sous forme de boîte?

Icônes de polices affichées sous forme de boîte

4 Utiliser la bonne famille de polices

Afin d’utiliser la police géniale avec CSS, vous devez utiliser la bonne famille de polices. Vous trouverez ci-dessous le type de code CSS utilisé dans la version 4.70.

.li:before {
content:"00A3″; font-family: «FontAwesome» ; font-weight: normal ; }

Cependant, cela affichera une boîte au lieu d’une icône avec la version 5.0. vous devez utiliser le CSS suivant avec la version gratuite des versions 5.0.

.li:before {
content:”00A3″; font-family: «Font Awesome 5 Free» ; font-weight: 900 ; }

Par conséquent, assurez-vous d’utiliser la bonne famille de polices "Font Awesome 5 Free" dans le CSS. De plus, si vous utilisez des icônes sociales, la famille de polices doit être «Font Awesome 5 Brands ». Ce sont les deux familles de polices disponibles pour les utilisateurs gratuits.

5 Utilisez le bon préfixe de style CSS

Une autre confusion est que la version 5.0 a des classes CSS différentes des versions précédentes. Sur la version 4.7, vous pouvez utiliser le préfixe de style fa comme ci-dessous :

<i class="fa-camera">

Cependant, cela ne fonctionnera pas à partir de la version 5.0. Le préfixe de style fa a été déprécié et vous devez utiliser fas pour les icônes solides et fab pour les icônes de marque sociale comme Facebook.

6 Vérifier le poids de la police

Font Awesome version 5.0 ne prend pas en charge la déclaration générale «font-weight:normal» en CSS. Vous devez déclarer un poids de police spécifique pour que l’icône apparaisse.

7 Vérifiez le code de contenu CSS

Le dernier point est de s’assurer que le code de contenu utilisé dans CSS est correct. Vous devez utiliser l’un des codes disponibles sur le site de police génial dans le pseudo-élément CSS. De plus, assurez-vous d’utiliser le code au format « f00d » ; pour afficher correctement l’icône.

Sommaire

Vous trouverez ci-dessous le résumé de la famille de polices, de l’épaisseur de police, du préfixe de style et des styles disponibles pour les utilisateurs gratuits et professionnels. Vous devez vous assurer que tous ces éléments sont corrects pour que l’icône apparaisse à la place d’une boîte.

Style Disponibilité Poids de la police Préfixe de style Famille de polices
Solide Libérer 900 tu fais Font Awesome 5 Free ou Font Awesome 5 Pro
Ordinaire Pro 400 loin Police Awesome 5 Pro
Léger Pro 300 fal Police Awesome 5 Pro
Bichromie Pro 900 mode Police Awesome 5 Duotone
Marques Libérer 400 fabuleux Font Awesome 5 Marques

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails