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

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?

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?

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>;
}

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

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;

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;

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 }/>

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'

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!

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.

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>

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>

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

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'

Kasse reagieren Symbole ziemlich dumm und hat gut funktioniert.

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

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