Installieren Sie font awesome 5 mit npm für scss-Nutzung

wie der Titel sagt, ich kann nicht installieren Sie font awesome 5 mit npm für scss Zwecke.

Versucht zu installieren, version 5

Nach https://fontawesome.com/how-to-use/use-with-node-js

npm i --save @fortawesome/fontawesome

Suche durch die installation in node_modules ich sehe keine scss-Datei zu Haken bis zu. Ich habe versucht, einschließlich der Stile.css-Datei in meine app.scss-Datei, aber das hat nicht funktioniert.

Mein setup für version 4:

Paket.json
"font-awesome": "^4.7.0",

app.scss
@import "node_modules/font-awesome/scss/font-awesome.scss";

Nutzung
<i className="fa fa-save icon controlItem"></i>

Easy as pie. Wie kann ich erreichen, das mit version 5?? Benutze ich das falsche Paket?

UPDATE

Anscheinend nur mit @fortawesome/fontawesome ist nicht eanough. Die Pakete aufgeteilt wurden, so dass Sie auch wählen Sie
npm install --save @fortawesome/fontawesome-free-regular
Noch immer habe ich keinen Erfolg mit dem importieren

InformationsquelleAutor Anders | 2018-03-15

18
```
npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons
```
In Ihrem app.js oder entsprechenden Javascript-Datei,
```
import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'

fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)
```
Für die Benutzung gibt es leichte änderungen an der Art und Weise der Klassennamen verwendet werden. Bitte beachten Sie die Symbole auf Fontawesome Website für die "volle" Klasse Namen.

Beispiel
```
<i class="fas fa-chevron-left"></i>
```
Obwohl die Idee der addition aller 3 Varianten von Schriftarten in das Projekt zu sein scheint, eine bequeme Sache, tun, beachten Sie, dass dies verlangsamt die Leistung beim erstellen/kompilieren Sie Ihr Projekt. So ist es dringend empfohlen, dass Sie hinzufügen, die Schriftarten, die Sie brauchen, statt alles.
- Ich war verwirrt, wie OP und bekommen haben bis zu dem Punkt, wo ich erfolgreich importiert Font Awesome 5 wie in deinem Beispiel. Jetzt habe ich eine Frage, vielleicht weisst du die Antwort auf: beim kompilieren meiner app.js (mit Laravel Mix/webpack) der Ausgabe-Datei ist ~2 MB! Ich bin nur der Import einer Schriftart Awesome icon-set (fontawesome-pro-regular) und hinzufügen, um fontawesome.library in meinem app.js. Da Sie Staatliche hier, dass die fontawesome.library Funktion ist ausdrücklich nicht für den Import aller Symbole, warum die Datei so groß geworden?
- Sorry, ich bin nicht so sicher über diese. Sie haben zu prüfen, mit der Font-Awesome-team. Sie sind in der besten position, das zu erklären.
- Ich habe vor kurzem gerade in das gleiche problem wie du. Die Kompilierung hat wirklich lange gedauert, um zu bauen mit webpack
- genial! kein importieren von css-oder scss-Dateien mehr +1
- diese Pakete sind veraltet. Änderung: @fortawesome/free-Marken-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons
InformationsquelleAutor Ru Chern Chong
0

Mein Verständnis von FontAwesome 5 ist, dass Sie javascript verwenden, fügen inline SVGs auf den DOM.

Werfen Sie einen Blick auf diese Artikel: SVG mit JS

Eher als kompilieren eine scss-Datei, die Sie gerade brauchen, um das javascipt ein: fontawesome-all.js, alle Symbole, die Sie hinzufügen, um Ihre HTML sollte dann umgewandelt werden SVGs automatisch.
- Danke, aber gibt es keine fontawesome-all.js in meiner 5.0.8 - eqvivalent zu npm version 1.1.4). Ich würde es vorziehen, nicht zu ziehen es manuell oder über die url..
InformationsquelleAutor Sam Willis
0

Im Falle dass, wenn Sie möchten, um zu extrahieren alle die Font-Awesome-spezifische Javascript-Dateien auf die vendor.js mit Laravel zu Mischen, müssen Sie nur entpacken Sie die Pakete, um die extract() Methode als array. Sie nicht sogar brauchen, um die Nutzung fontawesome.library.add() Methode zum hinzufügen von Unterstützung für die Schriftarten. Dies wird Ihnen helfen, verwalten die herstellerspezifische Datei-cache in der Zukunft.
```
mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        '@fortawesome/fontawesome',
        '@fortawesome/fontawesome-free-brands',
        '@fortawesome/fontawesome-free-regular',
        '@fortawesome/fontawesome-free-solid',
        '@fortawesome/fontawesome-free-webfonts'
    ]);
```
InformationsquelleAutor Md Mazedul Islam Khan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.