How to install font-awesome in Visual Studio 2017 mit ASP.NET Core v2
Ich Baue eine Webseite mit ASP.NET Core-v2 und möchte die Verwendung von font-awesome.
Lassen Sie mich zunächst sagen, dass ich versucht habe, ein paar Dinge. wie die Installation von Bower von NPM installieren von font-awesome von NPM installieren von font-awesome von Bower Pakete in VS, aber nichts scheint zu funktionieren.
kann jemand bitte die korrekte Installation von font-awesome, (bevorzugt ohne Verwendung einer Menge von console-Befehlen oder manuelles kopieren der Dateien.)
Dies ist, was mein depedencises derzeit aussieht
- Haben Sie versucht, es zu installieren mit NuGet? nuget.org/packages/FontAwesome
- Tja, das hätte installieren Sie das Paket als Nuget, aber wie aktiviere ich es auf meine web-Seite?
- Lesen Sie dazu bitte die font - awesome-CSS auf Ihrer Seite header
<link href="../Content/font-awesome.min.css" />
- Überprüfen Sie meine Antwort für weitere details und Beispiel
- naja, das problem ist, dass ich nicht sehen kann wie der font-awesome-css-oder in einer der anderen fa-Dateien. so zeigen in den content-Ordner wird nicht helfen. ich sehe nach der Installation ist Abhängigkeiten\NuGet\FontAwesome-Paket
- In .Net core diese Dateien werden unter dem folgenden Pfad
C:\Users\username\.nuget\packages\fontawesome\4.7.0
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin mit ASP.NET Core 2.0.8, auf Windows 10, und nur gekämpft, um zu bekommen, FA, um mein Projekt zu. Ich war in der Lage, um es in NPM, indem Sie es dem Paket bei.json (wie andere erwähnt haben) unter Abhängigkeiten, wie diese:
JS:
Leider, obwohl es wieder in das Paket, es hat nicht bereitstellen, css-Dateien, wo ich es erwartet hatte, und so konnte ich Sie verweisen. Ich glaube nicht, dass der folgende ist so etwas wie der "richtige" Weg, es zu tun (immer noch lernen!), jedoch, es funktionierte für mich.
Im Projektmappen-Explorer:
Können Sie nun ziehen Sie diese in Ihrem Projekt Verweise auf Sie, und starten Sie mit Font Awesome, wie dieser:
_Layout.cshtml:
HTML:
Hoffe das ist eine Hilfe, um jemand zu stoppen, indem, wie ich war.
Ich würde empfehlen, mit LibMan für diese (Eine kurze Dokumentation, wie es zu benutzen).
Schrieb ich es manuell, Wette, fügen Sie es über "Hinzufügen -> Client-Seitige Bibliothek". Hier ist mein libman.json
Bower
Weg geht.NuGet
jetzt konzentrieren .NET-Pakete, so dass Ihre beste Wette, umfont-awesome
ist überNPM
.1.Download NPM
Stellen Sie sicher, dass Sie die neueste
nodejs
installiert. Navigieren Sie zu https://nodejs.org/en/ und laden Sie die LTS-version.Prüfen Sie die version der
node
sowienpm
auf Ihrem Computer installiert ist:node -v
undnpm -v
2. Hinzufügen
package.json
Müssen Sie die npm-Konfiguration-Datei zu Ihrem Projekt. Diese Datei listet alle Ihre Pakete und wird von npm wiederherstellen Pakete, wenn es nötig ist.
Hinzufügen der npm-Konfiguration-Datei:
3. Installieren von font-awesome (und andere)
Öffnen
package.json
und unterdevDependencies
, indem Sie einfach"font-awesome":
sollte es Ihnen automatisch eine Liste der verfügbaren Versionen können Sie wählen. Wählen Sie eine version aus, die Sie mögen.Durch speichern dieser
package.json
- Datei, dienpm
herunterladen werden die Bibliotheken aufgeführt, die in die verstecktenode_modules
- Ordner unter Ihrem Projekt.4. Kopieren von Dateien auf wwwroot
In ASP.NET Core-MVC-Anwendungen, wenn Sie verwenden möchten, statische Inhalte wie Stile und javascript-Dateien, neben Sie zu aktivieren müssen
app.UseStaticFiles();
imStartup.cs
Sie auch kopieren müssen die Dateien in den Ordner "wwwroot". Standardmäßig wird der Inhalt, zum Beispiel, innode_modules
sind nicht gewartet werden, um Ihre Anwendung.Können Sie natürlich manuell bewältigen Sie die gewünschten Dateien in den Ordner "wwwroot". Aber dann werden Sie haben, um die Dateien zu ersetzen, wenn es neue Versionen herauskommen.
Zu richtig kopieren Sie die Dateien, die wir brauchen, zu verwenden 3rd-party-Werkzeuge!
BundlerMinifier ist ein großartiges Werkzeug, das Sie verwenden können, um die bundle-Dateien, die Sie möchten und die Ausgabe der Verzeichnisse, die Sie wollen. Es nutzt eine ähnliche Konfigurationsdatei namens
bundleconfig.json
:Aber dieses tool funktioniert nicht gut mit den Dateitypen andere als
.css
und.js
. Es ist auch eine Frage der relativen url zu dem font-awesome fonts-Ordner, da die font-awesome-Stil verwendeturl();
(Einstellung"adjustRelativePaths": false
funktioniert nicht immer).5. Erstellen Gulp Aufgaben
Zu richtig bewegen font-awesome-Dateien und Schriftarten auf wwwroot Ordner, die ich verwenden kann
gulp
Aufgaben einrichten, die ich ausführen können, bevor Sie bauen, nach bauen, usw:5.1. Installieren
gulp
(undrimraf
, mit dem unix-Kommandorm -rf
)Gehen
package.json
und gebengup
undrimraf
in der Liste von Abhängigkeiten. Speichern Sie die Datei.5.2. Hinzufügen
gulpfile.js
zu Ihrem Projekt und Aufgaben definierenIch im Grunde brauchen, um eine Aufgabe zu erstellen, zu verschieben, font-awesome, um wwwroot/libs Ordner, und erstellen Sie eine weitere Aufgabe zu tun das Gegenteil für die Bereinigung. Ich ließ den anderen Aufgaben, die nicht mit font-awesome.
5.3 Ausführen von Aufgaben
Nachdem Sie eingerichtet haben, die
gulpfile.js
Sie sollten in der Lage sein zu sehen, die aufgeführten Aufgaben im "Task Runner Explorer". Wenn Sie nicht haben, die Fenster in Visual Studio, Gehen Sie zu "Ansicht" -> "Other Windows".Können Sie manuell führen Sie jede Aufgabe mit der rechten Maustaste und klicken Sie auf "Ausführen". Oder können Sie es automatisch ausgeführt, wenn vor dem bauen, nach bauen, reinigen oder öffnen Sie das Projekt.
Nachdem Sie die setup-Bindungen, ein header würde Hinzugefügt werden, um die
gulpfile.js
:Speichern Sie nun die
gulpfile.js
- Datei und erstellen Sie Ihr Projekt. Font-awesome-Dateien und Schriftarten sollten, werden automatisch verschoben, um das wwwroot und ist einsatzbereit.Dies ist für .NET Core 2, nachdem Sie erstellen ein SPA-Projekt mit dotnet neue eckige:
Gehen Sie auf die Wurzel des Projekts und das Paket installieren: npm install font-awesome --sparen. Sie sollten jetzt sehen, es in ein Paket.json-Abhängigkeiten.
Danach gehen Sie nach webpack.config.vendor.js und hinzufügen, schriftart genial, um die Arrays unter nicht-Baum shakable Module:
const nonTreeShakableModules = [ 'bootstrap', 'bootstrap/dist/css/bootstrap.css', 'es6-Versprechen', 'es6-shim', 'Ereignis-Quelle-polyfill', 'font-awesome/css/font-awesome.css', 'jquery', ];
Nun müssen wir sagen, das webpack, das wir Hinzugefügt dieses neue Paket. Also, wenn Sie nicht getan haben, bevor Sie installieren Sie diese in den root von Projekt mit npm install --save-dev npm-install-webpack-plugin.
Schließlich führen Sie diesen Befehl in den root von Projekt: webpack --config webpack.config.vendor.js
Als Empfehlung Microsoft
Öffnen Sie die
bower.json
- Datei und fügen Siefont-awesome
um die AbhängigkeitenÖffnen Sie die
.bowerrc
Datei unterbower.json
, Diedirectory
Eigenschaftwwwroot/lib
zeigt die Lage Bower installieren Sie das Paket Vermögenswerte.Nun können Sie sich beziehen font-awesome, wie unten
Der einfachste Weg, um loszulegen mit Font Awesome ist eine Referenz hinzufügen, um es, mit seiner öffentlichen content delivery network (CDN) Ort:
Weitere details:
https://docs.microsoft.com/en-us/aspnet/core/client-side/bower
Gehen Paket.json
fügen Sie das folgende tag "font-awesome": "^4.7.0" in Abhängigkeiten Abschnitt
ZB :-