Comment utiliser des icônes comme Font Awesome dans Gatsby

Question

Je veux utiliser Font Awesome Icons dans mon projet Gatsby. J'aimerais inclure police impressionnante avec un CDN. Le simple fait de l'inclure dans une balise de script ne fonctionne pas. Je pense que je dois l'importer avec import ... from '../fontawesome.css' mais je ne suis pas capable d'obtenir ce travail et ai également voulu employer un CDN pour cela. Ou dois-je l'analyser avec une bibliothèque CSS pour Gatsby?

S'il vous plaît donnez-moi des conseils ou des conseils sur la façon de le faire.

Answer 1

Il est préférable d'inclure tous les modules dont votre application a besoin dans un seul JS. Mais si vous voulez continuer à utiliser CDN, il suffit de copier et de modifier le modèle par défaut:

cp .cache/default-html.js src/html.js 

Si vous voulez emballer-awesome police dans le faisceau de projet, vous pouvez choisir:

• Utiliser certains réagissent bibliothèque d'icônes. par exemple. react-fontawesome
• Inclure les fichiers CSS

Pour la dernière option, vous devez déplacer le css et les polices dans les pages dossier et inclure ensuite fa dans votre fichier js.

import './css/font-awesome.css' 

Pour utiliser une classe de police-awesome, utilisez le className attribut

<i className="fa fa-twitter"></i> 

Si vous cherchez obtenir le code de js d'un CDN, utilisez Netlify