webentwicklung-frage-antwort-db.com.de

So installieren Sie font-awesome in Visual Studio 2017 mit ASP.NET Core v2

Ich baue eine Webseite mit ASP.NET Core v2 und möchte font-awesome verwenden. 

Lassen Sie mich zunächst sagen, dass ich mehrere Dinge ausprobiert habe. B. Bower von NPM installieren, font-awesome von NPM installieren, font-awesome von Bower-Paketen in VS installieren, aber nichts scheint zu funktionieren. 

kann jemand bitte die korrekte Art der Installation von font-awesome angeben (bevorzugt ohne viele Konsolenbefehle oder manuelles Kopieren von Dateien)

So sehen meine Depedencises derzeit aus

 enter image description here

 enter image description here

 enter image description here  enter image description here

asp.net-mvcnpmvisual-studio-2017bowerfont-awesome
2
Thomas Adrian

Ich verwende ASP.NET Core 2.0.8 unter Windows 10 und habe nur Mühe gehabt, FA auch in mein Projekt zu integrieren. Ich konnte es zu NPM hinzufügen, indem ich es unter package.json (wie andere bereits erwähnt haben) unter Abhängigkeiten hinzufügt:

    {
      "version": "1.0.0",
      "name": "asp.net",
      "private": true,
      "devDependencies": {},
      "dependencies": {
        "bootstrap": "^4.1.1",
        "font-awesome": "4.7.0",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.3"
      }
    }

Obwohl das Paket wiederhergestellt wurde, wurden die CSS-Dateien leider nicht an den erwarteten Stellen bereitgestellt, sodass ich auf sie verweisen konnte. Ich glaube nicht, dass das Folgende etwas wie die "richtige" Methode ist (immer noch zu lernen!), Aber es hat für mich funktioniert.

Im Projektmappen-Explorer:

  • Navigieren Sie zu Abhängigkeiten > npm
  • Rechtsklick font-awesome > Im Datei-Explorer öffnen
  • Gehen Sie in den Ordner css
  • Kopieren Sie die .css-Dateien
  • Zurück in Visual Studio , im Projektmappen-Explorer , navigieren Sie zu wwwroot
  • Rechtsklick auf css > Im Datei-Explorer öffnen
  • Fügen Sie die Dateien ein

Sie können diese nun in Ihr Projekt ziehen, um Verweise darauf zu erstellen, und Font Awesome wie folgt verwenden:

_Layout.cshtml: 

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] websiteTitle</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
            <link href="~/css/font-awesome.css" rel="stylesheet" />
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css"
                asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        </environment>
    </head>

Ich hoffe, das hilft jedem, der vorbeischaut, so wie ich war.

4
Paul Maxwell

Bower geht weg. NuGet konzentriert sich jetzt auf .NET-Pakete, sodass Sie font-awesome am besten über NPM erhalten.

1.Download NPM

Stellen Sie sicher, dass Sie die neueste nodejs installiert haben. Navigieren Sie zu https://nodejs.org/en/ und laden Sie die LTS-Version herunter.

So überprüfen Sie die Version von node sowie npm, die auf Ihrem Computer installiert sind:

  1. Klicken Sie mit der rechten Maustaste auf Ihr Projekt in Visual Studio
  2. Wählen Sie "Open Command Line"
  3. Wählen Sie "Default (Cmd)" (oder den Befehl, den Sie verwenden möchten).
  4. Führen Sie den Befehl node -v und npm -v aus.

 enter image description here

2. package.json hinzufügen

Sie müssen die npm-Konfigurationsdatei für Ihr Projekt haben. Diese Konfigurationsdatei listet alle Ihre Pakete auf und wird von npm verwendet, um Pakete bei Bedarf wiederherzustellen.

So fügen Sie die npm-Konfigurationsdatei hinzu:

  1. Klicken Sie mit der rechten Maustaste auf Ihr Projekt in Visual Studio
  2. Wählen Sie "Hinzufügen" -> "Neues Element".
  3. Wählen Sie links "ASP.NET Core" aus und suchen Sie in der Suchleiste oben rechts nach "npm"
  4. Klicken Sie auf "Hinzufügen".

 enter image description here

3. Installieren Sie font-awesome (und andere)

Öffnen Sie package.json und unter devDependencies, indem Sie einfach "font-awesome": eingeben. Es sollte automatisch eine Liste der verfügbaren Versionen angezeigt werden, die Sie auswählen können. Wählen Sie eine Version, die Sie mögen.

Durch Speichern dieser package.json-Datei lädt die npm die aufgelisteten Bibliotheken in den versteckten node_modules-Ordner unter Ihrem Projekt herunter.

 enter image description here

4. Kopieren Sie die Dateien nach wwwroot

Wenn Sie in ASP.NET Core MVC-Anwendungen statische Inhalte wie Stile und Javascript-Dateien verwenden möchten, müssen Sie neben app.UseStaticFiles(); im Startup.cs auch die Dateien in den Ordner wwwroot kopieren. Standardmäßig kann der Inhalt in node_modules für Ihre Anwendung nicht verwendet werden.

Sie können die gewünschten Dateien natürlich auch manuell in den Ordner wwwroot aufnehmen. Dann müssen Sie die Dateien jedoch ersetzen, wenn neue Versionen herauskommen.

Um richtig die Dateien zu kopieren, müssen wir Tools von Drittanbietern verwenden! 

BundlerMinifier ist ein großartiges Werkzeug, mit dem Sie die gewünschten Dateien bündeln und in die gewünschten Verzeichnisse ausgeben können. Es verwendet eine ähnliche Konfigurationsdatei namens bundleconfig.json:

 enter image description here

Dieses Tool funktioniert jedoch nicht gut mit anderen Dateitypen als .css und .js. Es gibt auch ein Problem mit der relativen URL für den Ordner font-awesome fonts, da der font-awesome-Stil url(); verwendet (Einstellung "adjustRelativePaths": false funktioniert nicht immer).

5. Erstellen Sie Gulp-Aufgaben

Um richtig font-awesome Dateien und Schriftarten in den Ordner "wwwroot" verschieben, kann ich mit gulp Aufgaben einrichten, die ich vor dem Build, nach dem Build usw. ausführen kann:

5.1. Installieren Sie gulp (und rimraf, den Unix-Befehl rm -rf).

Gehen Sie zu package.json und geben Sie gup und rimraf in die Abhängigkeitsliste ein. Speicher die Datei.

 enter image description here

5.2. Fügen Sie Ihrem Projekt gulpfile.js hinzu und definieren Sie Aufgaben

Ich muss im Grunde eine Aufgabe erstellen, um font-awesome in den Ordner wwwroot/libs zu verschieben, und eine andere Aufgabe erstellen, um die Umkehrung für die Bereinigung durchzuführen. Ich habe andere Aufgaben ausgelassen, die nicht mit font-awesome zusammenhängen.

 enter image description here

5.3 Aufgaben ausführen

Nachdem Sie den gulpfile.js eingerichtet haben, sollten Sie die im "Task Runner Explorer" aufgeführten Aufgaben sehen können. Wenn Sie dieses Fenster nicht in Visual Studio haben, gehen Sie zu "Ansicht" -> "Andere Fenster".

 enter image description here

Sie können jede Aufgabe manuell ausführen, indem Sie mit der rechten Maustaste darauf klicken und auf "Ausführen" klicken. Oder Sie können es automatisch vor dem Build, nach dem Build, dem Bereinigen oder dem Öffnen eines Projekts ausführen.

Nachdem Sie die Bindungen eingerichtet haben, wird dem gulpfile.js ein Header hinzugefügt:

 enter image description here

Speichern Sie nun die gulpfile.js-Datei und erstellen Sie Ihr Projekt. Ihre font-awesome Dateien und Schriftarten sollten automatisch in das wwwroot verschoben werden und können verwendet werden.

 enter image description here

1
David Liang

Ich würde empfehlen, LibMan dafür zu verwenden ( Kurze Dokumentation, wie man es benutzt ).

Ich habe es manuell geschrieben, ich wette, Sie könnten es über "Hinzufügen -> Client-Side Library" hinzufügen. Hier ist mein libman.json 

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
    "libraries": [
        {
            "library": "[email protected]",
            "destination": "wwwroot/lib/font-awesome",
            "files": [
                "css/font-awesome.min.css",
                "fonts/fontawesome-webfont.eot",
                "fonts/fontawesome-webfont.svg",
                "fonts/fontawesome-webfont.ttf",
                "fonts/fontawesome-webfont.woff",
                "fonts/fontawesome-webfont.woff2",
                "fonts/FontAwesome.otf"
            ]
        }
    ]
}
1
Aleksej Vasinov

Als Empfehlung von Microsoft

Die empfohlene Methode zum Installieren clientseitiger Abhängigkeiten wie Bootstrap In ASP.NET Core ist über Bower (mithilfe von bower.json).

Öffnen Sie die Datei bower.json und fügen Sie den Abhängigkeiten font-awesome hinzu

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "Font-Awesome": "4.3.0"
  }
}

Öffnen Sie die Datei .bowerrc unter bower.json. Die Eigenschaft directory ist auf wwwroot/lib gesetzt. Dies gibt an, wo Bower die Paketassets installiert.

{
 "directory": "wwwroot/lib"
}

Jetzt können Sie Schriftart-Awesome wie unten beziehen

<link href="/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />

Die einfachste Möglichkeit, mit Font Awesome zu beginnen, ist das Hinzufügen eines Verweises über den Standort des Public Content Delivery Network (CDN):

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Für mehr Details:
https://docs.Microsoft.com/en-us/aspnet/core/client-side/bower

0
Wael Abbas

Dies ist für .NET Core 2, nachdem Sie ein SPA-Projekt mit dotnet new angle erstellt haben:

Gehen Sie zum Stammverzeichnis des Projekts und installieren Sie das Paket: npm install font-awesome --save. Sie sollten es jetzt in package.json-Abhängigkeiten sehen.

Danach gehen Sie zu webpack.config.vendor.js und fügen Sie dem Array font awesome unter den nicht-verwinkbaren Modulen hinzu:

const nonTreeShakableModules = ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'es6-promise', 'es6-shim', 'event-source-polyfill', 'font-awesome/css/font-awesome .css ',' jquery ']];

Jetzt müssen wir dem Webpack mitteilen, dass wir dieses neue Paket hinzugefügt haben. Wenn Sie dies noch nicht getan haben, installieren Sie dies im Stammverzeichnis von project mit npm install --save-dev npm-install-webpack-plugin.

Führen Sie schließlich diesen Befehl im Stammverzeichnis von project aus: webpack --config webpack.config.vendor.js

0
Aftab Lala

Gehen Sie zu package.json

fügen Sie das folgende Tag "font-awesome" hinzu: "^ 4.7.0" in dependencies section

Z.B :- 

  {
  "name": "imsy-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angular2-moment": "^1.9.0",
    "core-js": "^2.4.1",
    "ng2-toasty": "^4.0.3",
    "ng5-breadcrumb": "0.0.6",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20",
    "font-awesome": "^4.7.0"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "TypeScript": "~2.5.3"
  }
}
0
MAFAIZ