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?
reactjs
font-awesome
user3127060
quelle
quelle
react-fontawesome
Version 4 beziehen , andere auf die offizielle@fortawesome/fontawesome
Komponente, die Version 5 unterstützt.Antworten:
React verwendet das
className
Attribut 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.
quelle
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.
Importieren Sie font-awesome in Ihre index.js-Datei. Fügen Sie einfach die folgende Zeile zu Ihrer index.js-Datei hinzu
oder
Vergessen Sie nicht, className als Attribut zu verwenden
quelle
../node_modules/
in den Pfad aufnehmen müssen ...import 'font-awesome/css/font-awesome.min.css';
funktioniert :)<i className="far fa-heart"></i>
funktioniert nur mit font-awesome v5. Diese Lösung installiert font-awesome v4Sie können auch die
react-fontawesome
Symbolbibliothek verwenden. Hier ist der Link: React-FontawesomeInstallieren Sie auf der NPM-Seite einfach über npm:
Benötigen Sie das Modul:
Verwenden Sie schließlich die
<FontAwesome />
Komponente und übergeben Sie Attribute, um das Symbol und das Design anzugeben: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">
quelle
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
public
Ordner kopieren und das Stylesheet mit dem richtigensrc
manuell hinzufügen .https://github.com/FortAwesome/react-fontawesome
installiere fontawesome & reagiere-fontawesome
dann in Ihrer Komponente
quelle
@fortawesome/fontawesome-free-regular
da es aus Ihrem Beispiel nicht verwendet wird.import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
FontAwesomeIcon ändern. Dies ist kein Standardexport mehr.in index.js
Verwenden Sie dann die folgenden Symbole:
quelle
Die einfachste Lösung ist:
Installieren:
Importieren:
Verwenden:
quelle
Sie müssen das Paket zuerst installieren.
ODER
Vergessen Sie nicht , zu verwenden ,
className
stattclass
.Später müssen Sie sie in die Datei importieren, in der Sie sie verwenden möchten.
oder
quelle
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 :
und importieren Sie dann alles in Ihre React-App:
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.
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:
Verwenden Sie Folgendes, um die Symbole in Ihrem React js-Code zu verwenden:
Der Symbolname befindet sich in der .js-Datei des entsprechenden Symbols:
zB für faCheckCircle schauen Sie in faCheckCircle.js nach der Variablen ' iconName ':
und der React-Code sollte folgendermaßen aussehen:
Viel Glück!
quelle
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:
Dann habe ich oben in meiner Fußzeilenkomponente Folgendes eingefügt:
Meine Komponente sah dann so aus:
Lief wie am Schnürchen.
quelle
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 )
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>
quelle
dann
quelle
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.
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:
in public / index.html
Nach all den oben genannten Schritten funktioniert das Fontawesome NICELY !!!
quelle
Wie 'Praveen MP' sagte, können Sie font-awesome als Paket installieren. Wenn Sie Garn haben, können Sie laufen:
Wenn Sie kein Garn haben, tun Sie, was Praveen gesagt hat, und tun Sie Folgendes:
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
quelle
Kasse reagieren Symbole ziemlich dumm und hat gut funktioniert.
quelle
In meinem Fall habe ich die Dokumentation für das
react-fontawesome
Paket befolgt, aber es ist nicht klar, wie das Symbol beim Festlegen der Symbole in der Bibliothek aufgerufen werden solldas war was ich tat:
Aber ich habe diesen Fehler bekommen
Dann habe ich den Alias hinzugefügt, als ich die Icon-Requisite übergeben habe:
Und es funktioniert, Sie können den Präfixwert in der Datei icon.js finden, in meinem Fall war: faCoffee.js
quelle
<FontAwesomeIcon icon={faCoffee} />