Comment utiliser Font Awesome v5.7.2 avec HTML

Font Awesome est l'un des moyens les plus populaires d'ajouter des icônes à votre site. Mais que faire si vous ajoutez le CDN à l' élément de votre page et que vous ne voyez que des rectangles noirs?

Voici quelques points à garder à l'esprit lorsque vous ajoutez Font Awesome à votre prochain projet.

Ajouter le lien à la tête

Imaginez que vous ayez le code HTML suivant:

Comme les autres CDN, vous devez ajouter un élément au fichier . Pour Font Awesome 5.7.2, cela ressemblera à ceci:

En ligne vs local

Si vous exécutez le code suivant dans un éditeur Web tel que CodePen ou CodeSandbox, le code suivant rend les icônes correctement:

Mais si vous essayez d'ouvrir la page localement dans un navigateur, vous verrez toujours les rectangles noirs au lieu des icônes:

Jetez un autre coup d'œil à hrefl' élément ci-dessus. Est-ce que tu le vois?

Le problème est que, lorsque vous chargez la page à partir de votre système de fichiers local, le navigateur essaie de trouver le fichier CSS Font Awesome à la racine du système de fichiers.

Pour que les choses fonctionnent en ligne et localement, assurez-vous d'ajouter le schéma d'URL (HTTP, ou mieux, HTTPS) au href:

Que se passe t-il ici?

Lorsque vous désactivez le schéma d'URL ( href="//use.fontawesome..."), le navigateur utilise le même schéma d'URL que celui avec lequel la page a été chargée.

Donc, si vous exécutez la page localement en exécutant le fichier HTML dans un navigateur, hrefsuppose que Font Awesome CSS est également un fichier qui est également enregistré localement ( file:).

Assurez-vous simplement que les hrefattributs de vos éléments pointent tous vers l'URL complète, y compris le schéma d'URL, et vous devriez être prêt à partir.