web-dev-qa-db-fra.com

Comment installer font-awesome dans Visual Studio 2017 à l'aide d'ASP.NET Core v2

Je construis une page Web en utilisant ASP.NET Core v2 et souhaite utiliser font-awesome. 

Permettez-moi d’abord de dire que j’ai essayé plusieurs choses. comme installer Bower à partir de NPM, installer font-awesome à partir de NPM, installer font-awesome à partir de packages Bower dans VS, mais rien ne semble fonctionner. 

quelqu'un peut-il s'il vous plaît fournir le moyen correct pour installer font-awesome, (préféré sans utiliser beaucoup de commandes de la console ou la copie manuelle des fichiers.)

Voici à quoi ressemble mon bureau

 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

J'utilise ASP.NET Core 2.0.8 sur Windows 10 et j'ai juste eu du mal à intégrer FA dans mon projet. J'ai pu l'ajouter à NPM en l'ajoutant à package.json (comme d'autres l'ont mentionné) sous des dépendances, comme ceci:

    {
      "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"
      }
    }

Malheureusement, bien qu'il ait restauré le paquet, il n'a pas déployé les fichiers css où je m'attendais pour pouvoir les référencer. Je ne crois pas que ce qui suit ressemble à la manière "correcte" de le faire (j'apprends toujours!), Mais cela a fonctionné pour moi.

Dans l'Explorateur de solutions:

  • Accédez à Dépendances > npm
  • Clic droit font-awesome > Ouvrir dans l'explorateur de fichiers
  • Allez dans le dossier css
  • Copier les fichiers .css
  • Retour dans Visual Studio , dans Explorateur de solutions , accédez à wwwroot
  • Clic droit css > Ouvrir dans l'explorateur de fichiers
  • Coller dans les fichiers

Vous pouvez maintenant les faire glisser dans votre projet pour y faire des références et commencer à utiliser Font Awesome, comme ceci:

_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>

J'espère que cela pourra aider ceux qui se présentent comme moi.

4
Paul Maxwell

Bower s'en va. NuGet se concentre maintenant sur les packages .NET afin que votre meilleur moyen d'obtenir font-awesome soit via NPM.

1.Télécharger NPM

Assurez-vous que la dernière nodejs est installée. Accédez à https://nodejs.org/en/ et téléchargez la version LTS.

Pour vérifier la version de node ainsi que npm installée sur votre ordinateur:

  1. Faites un clic droit sur votre projet dans Visual Studio
  2. Sélectionnez "Ouvrir la ligne de commande"
  3. Sélectionnez "Par défaut (Cmd)" (ou l'invite de commande que vous souhaitez utiliser).
  4. Exécuter la commande node -v et npm -v

 enter image description here

2. Ajouter package.json

Vous devez avoir le fichier de configuration npm dans votre projet. Ce fichier de configuration répertorie tous vos packages et est utilisé par npm pour restaurer les packages en cas de besoin.

Pour ajouter le fichier de configuration npm:

  1. Faites un clic droit sur votre projet dans Visual Studio
  2. Sélectionnez "Ajouter" -> "Nouvel élément"
  3. Sélectionnez "ASP.NET Core" sur la gauche et recherchez "npm" dans la barre de recherche en haut à droite.
  4. Hit "Ajouter"

 enter image description here

3. Installez font-awesome (et autres)

Ouvrez package.json et sous devDependencies, en tapant simplement "font-awesome":, il devrait vous donner automatiquement une liste des versions disponibles que vous pouvez choisir. Choisissez une version que vous aimez.

En enregistrant ce fichier package.json, la npm téléchargera les bibliothèques répertoriées dans le dossier caché node_modules de votre projet.

 enter image description here

4. Copier les fichiers sur wwwroot

Dans les applications ASP.NET Core MVC, si vous souhaitez utiliser des contenus statiques tels que des styles et des fichiers javascript, vous devez également activer la fonction app.UseStaticFiles(); dans le Startup.cs et copier les fichiers dans le dossier wwwroot. Par défaut, le contenu, par exemple, dans node_modules ne peut pas être réparé par votre application.

Vous pouvez bien sûr gérer manuellement les fichiers de votre choix dans le dossier wwwroot. Mais vous devrez alors remplacer les fichiers chaque fois que de nouvelles versions sortent.

Pour correctement copier les fichiers, nous devons utiliser des outils tiers! 

BundlerMinifier est un excellent outil que vous pouvez utiliser pour regrouper les fichiers de votre choix et les exporter dans les répertoires de votre choix. Il utilise un fichier de configuration similaire appelé bundleconfig.json:

 enter image description here

Mais cet outil ne fonctionne pas bien avec les types de fichiers autres que .css et .js. Il existe également un problème d'URL relative au dossier de polices font-awesome car le style font-awesome utilise url(); (la définition de "adjustRelativePaths": false ne fonctionne pas toujours).

5. Créer des tâches Gulp

Pour correctement déplacer les fichiers et les polices font-awesome dans le dossier wwwroot, je peux utiliser gulp pour configurer les tâches que je peux exécuter avant la construction, après la construction, etc.:

5.1. Installez gulp (et rimraf, la commande unix rm -rf)

Allez à package.json et tapez gup et rimraf dans la liste des dépendances. Enregistrez le fichier.

 enter image description here

5.2. Ajoutez gulpfile.js à votre projet et définissez les tâches

J'ai essentiellement besoin de créer une tâche pour déplacer font-awesome dans le dossier wwwroot/libs et de créer une autre tâche pour effectuer l'inverse pour le nettoyage. J'ai omis d'autres tâches non liées à font-awesome.

 enter image description here

5.3 Exécuter des tâches

Une fois que vous avez configuré le gulpfile.js, vous devriez pouvoir voir les tâches répertoriées dans "Explorateur de tâches". Si vous ne disposez pas de cette fenêtre dans Visual Studio, cliquez sur "Affichage" -> "Autres fenêtres".

 enter image description here

Vous pouvez exécuter manuellement n'importe quelle tâche en faisant un clic droit dessus et en cliquant sur "Exécuter". Ou vous pouvez le faire fonctionner automatiquement quand avant la construction, après la construction, le nettoyage ou l'ouverture du projet.

Une fois les liaisons configurées, un en-tête serait ajouté au gulpfile.js:

 enter image description here

Enregistrez maintenant le fichier gulpfile.js et construisez votre projet. Vos fichiers et polices font-awesome doivent être automatiquement déplacés vers le wwwroot et prêts à être utilisés.

 enter image description here

1
David Liang

Je recommanderais d'utiliser LibMan pour cela ( Documentation courte sur son utilisation ).

Je l'ai écrit manuellement, vous pouvez l'ajouter via "Ajouter -> Bibliothèque côté client". Voici le mien 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

Sur recommandation de Microsoft

La méthode recommandée pour installer des dépendances côté client telles que Bootstrap dans ASP.NET Core via Bower (en utilisant bower.json)

Ouvrez le fichier bower.json et ajoutez font-awesome aux dépendances.

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

Ouvrez le fichier .bowerrc sous bower.json. La propriété directory est définie sur wwwroot/lib, ce qui indique l'emplacement où Bower installera les actifs du progiciel.

{
 "directory": "wwwroot/lib"
}

Maintenant, vous pouvez vous référer à font-awesome comme ci-dessous

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

Le moyen le plus simple de se familiariser avec Font Awesome est d’y ajouter une référence, à l’aide de son emplacement de réseau de diffusion de contenu public (CDN):

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

Pour plus de détails:
https://docs.Microsoft.com/en-us/aspnet/core/client-side/bower

0
Wael Abbas

Ceci est pour .NET Core 2, après avoir créé un projet SPA en utilisant dotnet new angular:

Accédez à la racine du projet et installez le package: npm install font-awesome --save. Vous devriez maintenant le voir dans les dépendances package.json.

Après cela, accédez à webpack.config.vendor.js et ajoutez une police géniale au tableau sous des modules shakables non arborescents:

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

Nous devons maintenant indiquer au pack Web que nous avons ajouté ce nouveau package. Donc, si vous ne l’avez pas déjà fait, installez-le à la racine du projet avec npm install --save-dev npm-install-webpack-plugin.

Enfin, exécutez cette commande à la racine du projet: webpack --config webpack.config.vendor.js

0
Aftab Lala

Aller à package.json

ajoutez la balise suivante "font-awesome": "^ 4.7.0" in dependencies section

Par exemple :- 

  {
  "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