web-dev-qa-db-fra.com

Font Awesome 5 utilise des icônes de réseaux sociaux/de marque dans React

La documentation de Font Awesome montre uniquement comment ajouter des polices standard/solides à React. Qu'en est-il des icônes sociales?

D'abord j'ai attrapé les paquets:

  npm i --save @fortawesome/fontawesome-svg-core \
  npm i --save @fortawesome/free-brands-svg-icons \
  npm i --save @fortawesome/react-fontawesome

Remarque: j'ai remplacé npm i --save @fortawesome/free-solid-svg-icons \ par npm i --save @fortawesome/free-brands-svg-icons \

Puis en réaction:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons' 

library.add(faFacebookF);

Et essayé d'utiliser un composant:

<FontAwesomeIcon icon="fa-facebook-f" />

même essayé:

et continue à entrer dans la console 

Impossible de trouver icon {préfixe: "fas", iconName: "fa-facebook-f"}

Je pense que je dois en quelque sorte obtenir le préfixe fab pour les marques.

C’est l’icône que je veux utiliser https://fontawesome.com/icons/facebook-f?style=brands

reactjsfont-awesome
2
CyberJ

Essayer:

<FontAwesomeIcon icon={['fab', 'facebook-f']} />

Notez que la police géniale a maintenant différents jeux d'icônes. L'ensemble solide (fas) est la valeur par défaut. L'icône facebook est dans le jeu de marques (fab).

8
David L. Walsh
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faFacebook } from "@fortawesome/free-brands-svg-icons"

const icon = <FontAwesomeIcon icon={faFacebook} />

J'ai trouvé l'orthographe/le boîtier des icônes de la marque sur GitHub de FontAwesome

0
BillFienberg