web-dev-qa-db-fra.com

Comment ajouter une police géniale à l'application client Blazor (composant Razor)?

J'ai créé un modèle hébergé par un assemblage Web blazor dot net core 3.1. Ensuite, faites un clic droit sur le dossier project.Client/wwwroot/css et cliquez sur Ajouter une bibliothèque côté client. Ensuite, sélectionné la bibliothèque font-awesome dans installé. J'ai ajouté la ligne ci-dessous à la tête index.html.

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

J'ai libman.json de

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "wwwroot/css/font-awesome/"
    }
  ]
}

J'ai ajouté juste en dessous de la ligne au compteur de page de modèle de blazor par défaut (composant de rasoir). L'intelisense trouve la police:

@page "/counter"

<h1>Counter</h1>

<span class="fa fa-save"></span>

@code {}

mais je ne vois qu'un carré

enter image description here

asp.net-corerazorblazorblazor-client-side
4
Sorush

Vous devez également inclure le JavaScript.

<link rel="stylesheet" href="css/font-awesome/css/fontawesome.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>

Vous pouvez mettre le <script> tag sous l'autre au bas du fichier mais je doute que vous remarquiez une différence de vitesse.

À partir d'un commentaire maintenant supprimé:

Le JS n'est qu'une option (l'option préférée), mais CSS seulement est toujours une option également. De plus, vous n'utilisez pas les deux. C'est soit CSS ou JS

Dans Blazor, je ne pouvais faire fonctionner que la version JS. CSS seulement ne fonctionnait pas (le fichier était 200-OK).

2
Henk Holterman

Vous devez réellement référencer la feuille de style dans votre page HTML. Cela se fait généralement dans la mise en page (_Layout.csthml). Vous devez ajouter quelque chose comme ce qui suit dans votre <head>:

<link rel="stylesheet" href="/css/font-awesome/font-awesome.min.css" />
0
Chris Pratt