Wie man ein Font Awesome-Icon in Reacts Render () einfügt

Immer wenn ich versuche, verwenden Sie eine Schriftart Awesome icon Reagieren die render(), ist es nicht angezeigt, auf der resultierenden web-Seite, obwohl es funktioniert im normalen HTML.

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

Hier ein live-Beispiel: http://jsfiddle.net/pLWS3/

Wo ist der Fehler?

InformationsquelleAutor der Frage user3127060 | 2014-04-16

font-awesome reactjs

48

Reagieren, verwendet die className Attribut, wie der DOM.

Wenn Sie der Entwicklung zu bauen, und Blick auf die Konsole, gibt es eine Warnung. Sie sehen diese auf der jsfiddle.

Warnung: der Unbekannte DOM-Eigenschaft, Klasse. Meinst du den Klassennamen?

InformationsquelleAutor der Antwort FakeRainBrigand
148

Wenn Sie neue zu Reagieren, JS und mit erstellen-reagieren-app-cli Befehl, um die Anwendung zu erstellen, führen Sie den folgenden Befehl NPM enthalten die neueste version von font-awesome.
```
npm install --save font-awesome
```
import font-awesome, um Ihre index.js Datei. Fügen Sie einfach folgende Zeile zu Ihrer index.js Datei
```
import '../node_modules/font-awesome/css/font-awesome.min.css'; 
```
oder
```
import 'font-awesome/css/font-awesome.min.css';
```
Vergessen Sie nicht, verwenden className als Attribut
```
 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
```
InformationsquelleAutor der Antwort Praveen M P

Können Sie auch die react-fontawesome Symbol-Bibliothek. Hier der link: reagieren-fontawesome

Aus der NPM-Seite, installieren Sie einfach über npm:

npm install --save react-fontawesome

Erforderlich das Modul:

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

Und schließlich, verwenden Sie die <FontAwesome /> Komponente und übergeben Sie in den Parametern angeben, Symbol und styling:

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

InformationsquelleAutor der Antwort Amituuush

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

installieren, fontawesome & reagieren-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

als in der 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;

InformationsquelleAutor der Antwort Alexander Sidikov

2

Müssen Sie installieren Sie das Paket zuerst.

npm install --save reagieren-fontawesome

ODER

npm i --save @fortawesome/reagieren-fontawesome

Vergessen Sie nicht, verwenden className statt Klasse.

Später müssen Sie importieren Sie Sie in die Datei, wo Sie wollen, Sie benutzen.

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

ODER

import FontAwesomeIcon von '@fortawesome/reagieren-fontawesome'

InformationsquelleAutor der Antwort Karan Patokar
1

als "Praveen M P', sagte Sie installieren können, font-awesome, wie ein Paket. wenn Sie Garn, die Sie ausführen können:
```
 yarn add font-awesome
```
Wenn Sie nicht über Garn tun, als Praveen gesagt und tun:
```
npm install --save font-awesome
```
dieser wird das Paket hinzuzufügen, um Ihre Projekte Abhängigkeiten und installieren Sie das Paket in Ihrer node_modules-Ordner. in Ihrem App.js Datei hinzufügen
```
import 'font-awesome/css/font-awesome.min.css'
```
InformationsquelleAutor der Antwort Jack Gerrard
1

War ich erlebt; ich brauche das reagieren/redux-site, die sollte funktionieren perfekt in der Produktion.

aber es war ein 'strict mode'; Sollte nicht Mittag ist es mit diesen Befehlen.
```
yarn global add serve
serve -s build
```
Sollte die Arbeit mit nur klicken Sie auf die build/index.html Datei.
Wenn ich fontawesome mit npm font-awesome, es war in der Entwicklung tätig-Modus, aber nicht in der 'strict mode'.

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  href="%PUBLIC_URL%/css/font-awesome.min.css">
```
Nachdem alle oben genannten Schritte die fontawesome funktioniert GUT!!!

InformationsquelleAutor der Antwort smartworld-konoha
0

Kasse reagieren icons ziemlich dope und gut gearbeitet.

InformationsquelleAutor der Antwort Damian Simon Peter
0

Alexanders Antwort von oben hat mir wirklich geholfen!

Ich habe versucht, soziale Konten-icons in der Fußzeile meiner app habe ich mit ReactJS und so konnte ich ganz einfach einen hover-Status, während Sie auch mit Ihnen verbinden, meine sozialen Konten. Dies ist, was ich landete mit zu tun:
```
$ npm i --save @fortawesome/fontawesome-free-brands
```
Dann an der Spitze meiner Fußzeile Komponente I enthalten:
```
import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';
```
Meine Komponenten dann wie folgt aussah:
```
<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>
```
Arbeitete wie ein Charme.

InformationsquelleAutor der Antwort Emily Kuckelman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.