So fügen Sie ein Font Awesome-Symbol in Reacts Rendering ein ()

99

Immer wenn ich versuche, ein Font Awesome-Symbol in React's zu verwenden render(), wird es nicht auf der resultierenden Webseite angezeigt, obwohl es in normalem HTML funktioniert.

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

Hier ist ein Live-Beispiel: http://jsfiddle.net/pLWS3/

Wo ist der Fehler?

user3127060
quelle
2
Beachten Sie, dass sich einige ältere Antworten auf react-fontawesomeVersion 4 beziehen , andere auf die offizielle @fortawesome/fontawesomeKomponente, die Version 5 unterstützt.
Jinglesthula
Und hier ist der aktuelle Link zum React-Fontawesome, der Version 5 unterstützt: github.com/FortAwesome/react-fontawesome
Mojave

Antworten:

57

React verwendet das classNameAttribut wie das DOM.

Wenn Sie den Entwicklungsbuild verwenden und sich die Konsole ansehen, wird eine Warnung angezeigt. Sie können dies auf der jsfiddle sehen.

Warnung: Unbekannte DOM-Eigenschaftsklasse. Meinten Sie className?

Räuber
quelle
das möglich zu arbeiten reactjs 15,6 i hinzugefügt Link index.html <link rel = "Verknüpfungssymbol" href = " maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/... "> aber kann nicht funktionieren
rahuldm
299

Wenn Sie React JS noch nicht kennen und zum Erstellen der Anwendung den Befehl create-react-app cli verwenden , führen Sie den folgenden NPM-Befehl aus, um die neueste Version von font-awesome einzuschließen.

npm install --save font-awesome

Importieren Sie font-awesome in Ihre index.js-Datei. Fügen Sie einfach die folgende Zeile zu Ihrer index.js-Datei hinzu

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

oder

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

Vergessen Sie nicht, className als Attribut zu verwenden

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
Praveen MP
quelle
15
Dies ist eigentlich die Antwort, die die ursprüngliche Frage am besten klärt.
Nacho_dh
18
Ich möchte nur beachten, dass Sie mit dem Setup der App zum Erstellen und Reagieren keine App../node_modules/ in den Pfad aufnehmen müssen ... import 'font-awesome/css/font-awesome.min.css';funktioniert :)
plong0
2
Aber auf diese Weise wird beim Hinzufügen von Symbolen wie <i className = "far fa-heart"> </ i> nicht gerendert. Wenn wir jedoch <i className = "fa fa-heart"> </ i> hinzufügen, wird gerendert. Warum ist das ?
Thidasa Pankaja
3
@ThidasaParanavitharana <i className="far fa-heart"></i>funktioniert nur mit font-awesome v5. Diese Lösung installiert font-awesome v4
XeniaSis
33

Sie können auch die react-fontawesomeSymbolbibliothek verwenden. Hier ist der Link: React-Fontawesome

Installieren Sie auf der NPM-Seite einfach über npm:

npm install --save react-fontawesome

Benötigen Sie das Modul:

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

Verwenden Sie schließlich die <FontAwesome />Komponente und übergeben Sie Attribute, um das Symbol und das Design anzugeben:

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)' }}
      />
    );
  }
});

Vergessen Sie nicht, das font-awesome CSS zu index.html hinzuzufügen:

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

Amituuush
quelle
14
Vergessen Sie nicht, die Font Awesome CSS auch zu Ihrem Index hinzuzufügen:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
SDGFSDH
8
Müssen Sie noch eine CDN hinzufügen, wenn Sie sie über npm installieren?
Amituuush
2
@Amituuush "Installieren" von FA über NPM (vorerst) bringt es nicht dahin, wo es sein muss. Sie müssen immer sicherstellen, dass Sie es in den entsprechenden publicOrdner kopieren und das Stylesheet mit dem richtigen srcmanuell hinzufügen .
Domi
4
Neuer CDN-Link: <link href = "// maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "
stylesheet
4
Autor von React-Fontawesome hier. Sie müssen die Stile / Schriftarten irgendwie in Ihre Anwendung aufnehmen, entweder mit einer CDN-Version oder mit etwas wie WebPack oder einfach nur mit heruntergeladenen Versionen. Das Ziel mit dieser Bibliothek war es, Ihnen kein Tool wie WebPack aufzuzwingen
Dana Woodman
27

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

installiere fontawesome & reagiere-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

dann in Ihrer Komponente

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;
Alexander Sidikov Pfeif
quelle
Brauchen Sie das wirklich: @fortawesome/fontawesome-free-regularda es aus Ihrem Beispiel nicht verwendet wird.
Gmajivu
@gabeno hey nein, es ist nur ein Beispiel. Dies sollte dich nur daran erinnern / zeigen, dass du auch den anderen benutzen kannst. Aber danke für den Hinweis, ich sollte einen Kommentar hinzufügen.
Alexander Sidikov Pfeif
1
Toll! Sie müssen nur diese import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'FontAwesomeIcon ändern. Dies ist kein Standardexport mehr.
MohitGhodasara
15
npm install --save-dev @fortawesome/fontawesome-free

in index.js

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

Verwenden Sie dann die folgenden Symbole:

import React, { Component } from "react";

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

export default Like;
Prasobh.Kollattu
quelle
13

Die einfachste Lösung ist:

Installieren:

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

Importieren:

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

Verwenden:

<FontAwesomeIcon icon={ faThumbsUp }/>
Jackkobec
quelle
5

Sie müssen das Paket zuerst installieren.

npm install --save react-fontawesome

ODER

npm i --save @fortawesome/react-fontawesome

Vergessen Sie nicht , zu verwenden , classNamestattclass .

Später müssen Sie sie in die Datei importieren, in der Sie sie verwenden möchten.

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

oder

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
Karan Patokar
quelle
5

Nachdem ich eine Weile damit zu kämpfen hatte, kam ich auf dieses Verfahren (basierend auf der Dokumentation von Font Awesome hier) ):

Wie bereits erwähnt, müssen Sie die Symbolbibliothek fontawesome , react-fontawesome und fontawesome installieren :

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

und importieren Sie dann alles in Ihre React-App:

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

library.add(faStroopwafel)

Hier kommt der schwierige Teil:

Um Symbole zu ändern oder hinzuzufügen, müssen Sie die verfügbaren Symbole in Ihrer Knotenmodulbibliothek finden, d. H.

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

Jedes Symbol verfügt über zwei relevante Dateien: .js und .d.ts, und der Dateiname gibt die Importphrase an (ziemlich offensichtlich ...). Das Hinzufügen von Symbolen für Wut , Edelsteine und Häkchen sieht also folgendermaßen aus:

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

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

Verwenden Sie Folgendes, um die Symbole in Ihrem React js-Code zu verwenden:

<FontAwesomeIcon icon=icon_name/>

Der Symbolname befindet sich in der .js-Datei des entsprechenden Symbols:

zB für faCheckCircle schauen Sie in faCheckCircle.js nach der Variablen ' iconName ':

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

und der React-Code sollte folgendermaßen aussehen:

<FontAwesomeIcon icon=check-circle/> 

Viel Glück!

Naor Bar
quelle
3

Alexanders Antwort von oben hat mir wirklich geholfen!

Ich habe versucht, Symbole für soziale Konten in der Fußzeile meiner mit ReactJS erstellten App abzurufen, damit ich ihnen problemlos einen Schwebezustand hinzufügen und gleichzeitig meine sozialen Konten verknüpfen kann. Das musste ich tun:

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

Dann habe ich oben in meiner Fußzeilenkomponente Folgendes eingefügt:

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

Meine Komponente sah dann so aus:

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

Lief wie am Schnürchen.

Emily Kuckelman
quelle
3

Wenn Sie die fantastische Schriftbibliothek einbinden möchten, ohne Modulimporte und npm-Installationen durchführen zu müssen, fügen Sie diese in den Kopfbereich Ihrer React index.html- Seite ein:

public / index.html (im Kopfabschnitt )

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

Verwenden Sie dann in Ihrer Komponente (z. B. App.js) einfach die Standardklassenkonvention für großartige Schriftarten. Denken Sie daran, className anstelle von class zu verwenden:

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

Matt C.
quelle
3
npm install --save font-awesome

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

dann

<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>
Hazem AbdelHamid
quelle
2

Ich habe diesen Fall erlebt; Ich brauche die React / Redux-Site, die in der Produktion perfekt funktionieren sollte.

aber es gab einen "strengen Modus"; Sollte es nicht mit diesen Befehlen zu Mittag essen.

yarn global add serve
serve -s build

Sollte nur funktionieren, klicken Sie auf die Datei build / index.html. Als ich fontawesome mit npm font-awesome verwendet habe, funktionierte es im Entwicklungsmodus, aber nicht im "strengen Modus".

Hier ist meine Lösung:

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 ***

in public / index.html

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

Nach all den oben genannten Schritten funktioniert das Fontawesome NICELY !!!

smartworld-dm
quelle
1

Wie 'Praveen MP' sagte, können Sie font-awesome als Paket installieren. Wenn Sie Garn haben, können Sie laufen:

 yarn add font-awesome

Wenn Sie kein Garn haben, tun Sie, was Praveen gesagt hat, und tun Sie Folgendes:

npm install --save font-awesome

Dadurch wird das Paket zu Ihren Projektabhängigkeiten hinzugefügt und das Paket in Ihrem Ordner node_modules installiert. in Ihrer App.js-Datei hinzufügen

import 'font-awesome/css/font-awesome.min.css'
Jack Gerrard
quelle
0

Kasse reagieren Symbole ziemlich dumm und hat gut funktioniert.

der Terminalguy
quelle
0

In meinem Fall habe ich die Dokumentation für das react-fontawesomePaket befolgt, aber es ist nicht klar, wie das Symbol beim Festlegen der Symbole in der Bibliothek aufgerufen werden soll

das war was ich tat:

App.js Datei

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

Komponentendatei

<FontAwesomeIcon icon={"coffee"} />

Aber ich habe diesen Fehler bekommen

Geben Sie hier die Bildbeschreibung ein Dann habe ich den Alias ​​hinzugefügt, als ich die Icon-Requisite übergeben habe:

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

Und es funktioniert, Sie können den Präfixwert in der Datei icon.js finden, in meinem Fall war: faCoffee.js

Erick Garcia
quelle
Für die erste Option sollten Sie <FontAwesomeIcon icon={faCoffee} />
Folgendes