web-dev-qa-db-fra.com

react-fontawesome ne pas afficher les icônes

J'essaie d'utiliser react-fontawesome et de le mettre en œuvre dans ce qui me semble être exactement le même que le fichier readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md

import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <span>
                        <FontAwesome
                            className='super-crazy-colors'
                            name='rocket'
                            size='2x'
                            spin
                            style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
                        />
                        SOME TEXT
                    </span>
                </div>
                ...
            </div>
        )
    }
}

Mais je ne vois pas d'icône dans le DOM. Bien que je voie dans les outils de développement Chrome:

<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>

qui, selon moi, devrait être une balise <i>. J'ai essayé de changer le <span>...</span> en un <i>...</i> dans "modifier en HTML" dans les outils de développement et l'icône ne s'affiche toujours pas.

J'ai des add-module-exports dans mes plugins et stage-2 dans mes presets dans mon webpack.config.

Quelqu'un peut-il me dire s'il me manque quelque chose? Ai-je besoin d'un autre package que react-fontawesome pour que cela fonctionne? Dois-je importer le fichier standard font-awesome.css ou charger un CDN font-awesome? Toute aide serait grandement appréciée, merci!

reactjsfont-awesome
15
Casey

J'ai eu le même problème. Lisez leur Readme.md , et vous verrez qu’il ya cette note:

Remarque: Ce composant n'inclut aucun des polices CSS et Font Awesome, vous devez donc vous assurer de les inclure d'une manière ou d'une autre, soit en les ajoutant à votre processus de construction, soit en vous connectant à versions CDN .

Le moyen le plus simple consiste donc à créer un lien vers le fichier cdn de fontawesome dans votre code HTML.

<head>
<meta charset="UTF-8">    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
</head>
18
Alee

Exécuter npm install font-awesome --save

Dans votre index.js ou App.js ou YourComponent.js, importez le fichier CSS modifié.

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

Comme l'a souligné @Alee, les polices Fontaweome ne sont pas incluses dans le package. Vous devrez l'importer vous-même. 

  1. Installez le paquet npm font-awesome. Si vous utilisez npm, exécutez npm install font-awesome --save ou si vous utilisez du fil, exécutez yarn add font-awesome

  2. Il ne vous reste plus qu'à importer font-awesome.less sous le répertoire less en écrivant import 'font-awesome/less/font-awesome.less'

Maintenant, vous devriez voir vos icônes fonctionner :)

2
Sisir

Je suppose que vous n'avez pas encore importé le fichier CSS dont FontAwesome a besoin. Téléchargez le fichier CSS simplifié à partir du site Web de FontAwesome et importez-le dans votre fichier app.scss ou à tout autre endroit où vous importez d'autres feuilles de style. 

La bibliothèque react-fontawesome vous aide à créer des éléments avec des noms de classe tels que "flèche vers le haut", mais sans la feuille de style, votre projet ne saura pas qu'il existe des icônes correspondant à ces classes. 

0
N.L.

Le seul exemple dans lequel je travaille qui semble réellement à jour et n'a pas généré d'erreurs "ne peut pas résoudre" réagit ": 

https://scotch.io/tutorials/using-font-fien-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));
0
blah blah