web-dev-qa-db-fra.com

font-awesome ne fonctionne pas bundleconfig dans MVC5

Si je me réfère directement à font-awesome.css dans la page _layouts. ça va marcher

<link href="~/Content/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" />

Mais j'ai utilisé dans BundleConfig.cs. L'icône ne s'affiche pas. 

 bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/font-awesome-4.0.3/css/font-awesome.css",
                        "~/Content/bootstrap.css",                        
                         "~/Content/body.css",
                        "~/Content/site.css",
                        "~/Content/form.css"
                     ));

et aussi j’ai observé que la console du navigateur avait une erreur dans le répertoire des polices .Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:51130/fonts/fontawesome-webfont.woff?v=4.0.3

quel pourrait être le problème?

csstwitter-bootstrapfontsasp.net-mvc-5font-awesome
46
James123

Comme décrit dans cet article , essayez d'utiliser CssRewriteUrlTransform lors du regroupement:

bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.css",                        
        "~/Content/body.css",
        "~/Content/site.css",
        "~/Content/form.css"
    ).Include("~/Content/font-awesome-4.0.3/css/font-awesome.css", new CssRewriteUrlTransform());

Cela modifie les URL des ressources du fichier CSS en URL absolues afin que le regroupement ne gâche pas le chemin relatif. 

Lien MSDN: CssRewriteUrlTransform

93
Simon C

Ma solution était simple: exécutez PM> Install-Package FontAwesome et Indiquez le chemin correct:

.Include("~/Content/font-awesome.min.css")
9
harveyt

J'ai eu le même message d'erreur et corrigé après définition des types MIME pour les polices Web dans IIS .

3
MarwaAhmad

J'ai aussi eu ce même message d'erreur. Je devais faire une combinaison des réponses énumérées dans ce fil de discussion:

  1. Ajoutez cette ligne de code comme suggéré par @Simon C:

    .Include ("~/Contenu/font-awesome-4.0.3/css/font-awesome.css", nouveau CssRewriteUrlTransform ());

Cela a fonctionné pour corriger les URL relatives, cependant, je devais supprimer le fichier font-awesome.min.css de mon répertoire bower chaque fois que je publiais, sans quoi le bundler deviendrait confus et n'inclurait pas et ne minifiait pas le fichier font-awesome.css. Alors...

  1. Je devais faire ce que @miha avait suggéré dans un commentaire et corriger les URL relatives dans le fichier font-awesome.min.css avec CssRewriteUrlTransform (). J'ai donc décidé de réécrire les URL dans le fichier .min et d'inclure celle-ci à la place de la version non terminée et cela a fonctionné:

    .Include ("~/Content/font-awesome-4.0.3/css/font-awesome.min.css", nouveau CssRewriteUrlTransform ());

Si je comprends bien, le regroupeur n'essaiera pas de réduire à nouveau le fichier .min, car il est déjà en cours de modification. Le seul "inconvénient" est qu'il ne concatène pas le contenu de font-awesome.min.css dans le fichier css unique créé par le regroupeur. Il sera inclus séparément.

1
big_water

Avec la version 5.1.0, je devais référencer all.css au lieu de fontawesome.css c.-à-d.,

bundles.Add(new StyleBundle("~/bundles/fontawesome").Include(
    "~/Content/all.css",
    new CssRewriteUrlTransform()
));
0
ZerosAndOnes

J'ajoute une autre réponse à cette question si j'ai trouvé la solution en mélangeant certaines d'entre elles.

  1. La réponse la plus votée est la solution principale, mais il est également important de
  2. Ajoutez l'entrée suggérée par cette réponse . finalement
  3. Suivez le commentaire de @feradz dans réponse la plus votée : "supprimez la version .min.css - cela faisait que l'optimiseur ne générait pas de version abrégée avec le chemin correct}"

Le dernier point est la clé de tout: les versions "min" distribuées des fichiers js, ne suivent pas les règles "CssRewriteUrlTransform". Donc, la suppression manuelle de bootstrap.min.css, font-awesone.min.css a définitivement résolu le problème.

0
Gianpiero Caretti