Comment inclure une icône Font Awesome dans le render () de React


103

Chaque fois que j'essaie d'utiliser une icône Font Awesome dans React render(), elle n'est pas affichée sur la page Web résultante bien qu'elle fonctionne en HTML normal.

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Voici un exemple en direct: http://jsfiddle.net/pLWS3/

Où est la faute?


2
Notez que certaines réponses plus anciennes font référence à react-fontawesomequi est v4, et d'autres au @fortawesome/fontawesomecomposant officiel qui prend en charge la v5.
jinglesthula

Et voici le lien actuel vers le react-fontawesome qui prend en charge la version 5: github.com/FortAwesome/react-fontawesome
mojave

Réponses:


59

React utilise l' classNameattribut, comme le DOM.

Si vous utilisez la version de développement et regardez la console, il y a un avertissement. Vous pouvez le voir sur le fichier jsfiddle.

Avertissement: classe de propriété DOM inconnue. Vouliez-vous dire className?


est-ce possible de travailler reactjs 15.6 j'ai ajouté un lien index.html <link rel = "shortcut icon" href = " maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/... "> mais ne peut pas fonctionner
rahuldm

305

Si vous êtes nouveau dans React JS et que vous utilisez la commande create-react-app cli pour créer l'application, exécutez la commande NPM suivante pour inclure la dernière version de font-awesome.

npm install --save font-awesome

importez font-awesome dans votre fichier index.js. Ajoutez simplement la ligne ci-dessous à votre fichier index.js

import '../node_modules/font-awesome/css/font-awesome.min.css'; 

ou

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

N'oubliez pas d'utiliser className comme attribut

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

15
C'est en fait la réponse qui clarifie le mieux la question initiale.
nacho_dh

19
Je veux juste noter qu'avec la configuration de create-react-app , vous n'avez pas besoin d'inclure ../node_modules/dans le chemin ... import 'font-awesome/css/font-awesome.min.css';fonctionne :)
plong0

2
Mais de cette manière, lorsque nous ajoutons des icônes comme <i className = "far fa-heart"> </i>, il ne s'affiche pas. Mais si nous ajoutons <i className = "fa fa-heart"> </i>, il rend. Pourquoi ça ?
Thidasa Pankaja

3
@ThidasaParanavitharana en utilisant <i className="far fa-heart"></i>ne fonctionne qu'avec font-awesome v5. Cette solution installe font-awesome v4
XeniaSis

33

Vous pouvez également utiliser la react-fontawesomebibliothèque d'icônes. Voici le lien: react-fontawesome

Depuis la page NPM, installez simplement via npm:

npm install --save react-fontawesome

Nécessite le module:

var FontAwesome = require('react-fontawesome');

Et enfin, utilisez le <FontAwesome />composant et transmettez les attributs pour spécifier l'icône et le style:

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

N'oubliez pas d'ajouter le CSS font-awesome à index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">


14
N'oubliez pas d'ajouter le css Font Awesome à votre index aussi:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
sdgfsdh

8
avez-vous encore besoin d'inclure un cdn si vous l'installez via npm?
Amituuush

2
@Amituuush "Installer" FA via NPM (pour l'instant) ne le met pas là où il doit être. Vous devez toujours vous assurer de le copier dans votre publicdossier correspondant et ajouter srcmanuellement la feuille de style avec le bon .
Domi

4
Nouveau lien CDN: <link href = "// maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
guya

4
Auteur de react-fontawesome ici. Vous devrez inclure les styles / polices dans votre application d'une manière ou d'une autre, soit avec une version CDN, soit en utilisant quelque chose comme WebPack ou simplement en établissant un lien vers des versions téléchargées. Le but de cette bibliothèque était de ne pas vous forcer à utiliser un outil comme WebPack
Dana Woodman

28

https://github.com/FortAwesome/react-fontawesome

installer fontawesome et react-fontawesome

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-svg-core

puis dans votre composant

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;

Avez-vous vraiment besoin de ceci: @fortawesome/fontawesome-free-regularcar il n'est pas utilisé dans votre exemple.
gmajivu

@gabeno hé non, c'est juste un exemple. Cela devrait juste vous rappeler / montrer que vous pouvez également utiliser l'autre. Mais merci pour l'indice, je devrais ajouter un commentaire.
Alexander Sidikov Pfeif

1
Génial! juste besoin de modifier ce import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'FontAwesomeIcon n'est plus l'exportation par défaut.
MohitGhodasara

18
npm install --save-dev @fortawesome/fontawesome-free

dans index.js

import '@fortawesome/fontawesome-free/css/all.min.css';

puis utilisez des icônes comme ci-dessous:

import React, { Component } from "react";

class Like extends Component {
  state = {};
  render() {
    return <i className="fas fa-heart"></i>;
  }
}

export default Like;

14

La solution la plus simple est:

Installer:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Importer:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';

Utilisation:

<FontAwesomeIcon icon={ faThumbsUp }/>

6

Vous devez d'abord installer le package.

npm install --save react-fontawesome

OU

npm i --save @fortawesome/react-fontawesome

N'oubliez pas d'utiliser à la classNameplace de class.

Plus tard, vous devrez les importer dans le fichier où vous souhaitez les utiliser.

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

ou

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

6

Après avoir lutté avec cela pendant un moment, j'ai proposé cette procédure (basée sur la documentation de Font Awesome ici ):

Comme indiqué, vous devrez installer la bibliothèque d'icônes fontawesome , react-fontawesome et fontawesome :

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

puis importez tout dans votre application React:

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

library.add(faStroopwafel)

Voici la partie délicate:

Pour modifier ou ajouter des icônes, vous devrez trouver les icônes disponibles dans votre bibliothèque de modules de nœuds, c'est-à-dire

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons  

Chaque icône a deux fichiers pertinents: .js et .d.ts, et le nom du fichier indique la phrase d'importation (assez évidente ...), donc l'ajout d' icônes de colère , de gemme et de coche ressemble à ceci:

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

Pour utiliser les icônes dans votre code React js, utilisez:

<FontAwesomeIcon icon=icon_name/>

Le nom de l'icône se trouve dans le fichier .js de l'icône correspondante:

Par exemple, pour faCheckCircle, regardez dans faCheckCircle.js pour la variable ' iconName ':

...
var iconName = 'check-circle'; 
... 

et le code React devrait ressembler à ceci:

<FontAwesomeIcon icon=check-circle/> 

Bonne chance!


4

La réponse d'Alexandre d'en haut m'a vraiment aidé!

J'essayais d'obtenir des icônes de comptes sociaux dans le pied de page de mon application que j'ai créée avec ReactJS afin de pouvoir facilement leur ajouter un état de survol tout en leur permettant de lier mes comptes sociaux. C'est ce que j'ai fini par devoir faire:

$ npm i --save @fortawesome/fontawesome-free-brands

Ensuite, en haut de mon composant de pied de page, j'ai inclus ceci:

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

Mon composant ressemblait alors à ceci:

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

A fonctionné comme un charme.


4

Si vous souhaitez inclure la bibliothèque de polices géniale sans avoir à effectuer d'importations de modules et d'installations npm, placez-la dans la section head de votre page React index.html :

public / index.html (dans la section head)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Ensuite, dans votre composant (tel que App.js), utilisez simplement la convention de classe impressionnante de police standard. N'oubliez pas d'utiliser className au lieu de class:

<button className='btn'><i className='fa fa-home'></i></button>


4
npm install --save font-awesome

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

puis

<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>  
        <span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>

2

comme 'Praveen MP' l'a dit, vous pouvez installer font-awesome en tant que package. si vous avez du fil, vous pouvez exécuter:

 yarn add font-awesome

Si vous n'avez pas de fil, faites comme Praveen a dit et faites:

npm install --save font-awesome

cela ajoutera le package aux dépendances de vos projets et installera le package dans votre dossier node_modules. dans votre fichier App.js, ajoutez

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

2

J'ai vécu ce cas; J'ai besoin du site react / redux qui devrait fonctionner parfaitement en production.

mais il y avait un «mode strict»; Ne devrait pas le déjeuner avec ces commandes.

yarn global add serve
serve -s build

Devrait travailler avec seulement cliquez sur le fichier build / index.html. Quand j'ai utilisé fontawesome avec npm font-awesome, il fonctionnait en mode développement mais ne fonctionnait pas en «mode strict».

Voici ma solution:

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

dans public / index.html

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

Après toutes les étapes ci-dessus, la fontawesome fonctionne bien !!!



0

Dans mon cas, je suivais la documentation du react-fontawesomepackage, mais ils ne savent pas comment appeler l'icône lors de la configuration des icônes dans la bibliothèque

c'est ce que je faisais:

Fichier App.js

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

Fichier de composant

<FontAwesomeIcon icon={"coffee"} />

Mais j'obtenais cette erreur

entrez la description de l'image ici Ensuite, j'ai ajouté l'alias lors du passage de l'accessoire d'icône comme:

<FontAwesomeIcon icon={["fal", "coffee"]} />

Et cela fonctionne, vous pouvez trouver la valeur du préfixe dans le fichier icon.js, dans mon cas était: faCoffee.js


Pour la première option, vous devriez faire:<FontAwesomeIcon icon={faCoffee} />
gildniy
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.