Fontawesome-Symbol funktioniert nicht richtig in react.js

Kann mir jemand ein Beispiel für die Verwendung von Fontawome in React.js geben? Ich habe die reaktion font-awesome importiert. Das Symbol wird jedoch nicht im Browser angezeigt. Ich kann sehen, dass der Klassenname auf den Dom gesetzt wurde, aber es gibt keinen CSS-Stil, der mit dem Dom assoziiert ist.Fontawesome-Symbol funktioniert nicht richtig in react.js

von mir gefolgt Schritten 1) npm installieren --save reagieren-fontawesome 2) In meiner JS-Datei: Import FontAwesome von 'reagieren-fontawesome';

Quelle

2017-03-16 Sumeet

Möglicherweise müssen Kapital auf dem Namen (zB ). – fungusanthrax

Bei einer Top-Level-Komponente (Ihrer App oder Seite) müssen Sie das CSS einfügen, das die FontAwesome-Schriftart und -Klassen einbezieht. Ansonsten bedeuten deine Klassennamen nichts. Also, in Ihrer App.js (zum Beispiel) würden Sie etwas wie hinzufügen: import 'font-awesome/css/font-awesome.css'; –

Es gibt keine CSS-Datei in react-awesome, wenn sie über npm installiert wird. Dazu muss ich CDN in die Root-Datei aufnehmen. Aber ich will nicht beide, awesome npm und CDN. Es könnte über den Kopf Ich denke, – Sumeet

Wenn Sie webpack mit react.js verwenden, was Sie tun müssen, ist die Schrift mit einem loader, laden erste Schriftart-awesome installieren und dann configure der Lader in webpack.

{ 
    test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/, 
    loader: 'file-loader', 
}

probieren Sie es aus und lassen Sie mich wissen.

Edit:

habe ich vergessen zu erwähnen, dass Sie CSS genial Schrift importieren sollte

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

dann wie jede andere Klasse verweisen wie:

<span className="fa fa-facebook"></span>

Quelle

2017-03-16 20:06:23

Ich habe den obigen Code zu Webpack hinzugefügt. Was ich bekomme, ist span.fa.fa-rocket.fa-lg in DOM mit den Dimensionen 0 * 30. Ich denke, wegen der Dimensionen ist es nicht angezeigt – Sumeet

Ich aktualisierte meine Antwort, check it out –

Jack ... Ich habe keine CSS-Datei in React-Fontawesome ... Ich hatte NMP installiert React-fontawesome .. .dass nicht wissen warum ... also beim importieren import 'font-awesome/css/font-awesome.css' ich bekomme modul nicht gefunden – Sumeet

Fontawesome-Symbol funktioniert nicht richtig in react.js

Antwort

Verwandte Themen