Je travaille sur un projet dans ASP.NET MVC 4 et j’ai suivi les étapes suivantes:
Bootstrap Twitter téléchargé depuis http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/
Définissez l'action Construire sur les fichiers de police en contenu (les fichiers se trouvent dans le dossier ~/Content/font)
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Ajouté à RouteConfig.cs
routes.IgnoreRoute ("{dossier}/{* cheminInfo}", nouveau {dossier = "Contenu"});
Ajout des éléments suivants à Web.config
<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
<staticContent>
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".otf"/>
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".ttf" mimeType="font/ttf" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>
</system.webServer>
Code suivant inclus dans BundleConfig.cs
bundles.Add(new StyleBundle("~/bundles/maincss")
.Include("~/Content/bootstrap/bootstrap.css")
.Include("~/Content/bootstrap/bootstrap-theme.css")
.Include("~/Content/hbl-full.css"));
Aussi essayé avec le code suivant
IItemTransform cssFixer = new CssRewriteUrlTransform();
bundles.Add(new StyleBundle("~/bundles/maincss")
.Include("~/Content/bootstrap/bootstrap.css", cssFixer)
.Include("~/Content/bootstrap/bootstrap-theme.css", cssFixer)
.Include("~/Content/hbl-full.css", cssFixer));
Appelé dans Layout.cshtml principal
@ Styles.Render ("~/bundles/maincss")
Toujours dans les icônes localhost sont affichés normalement, mais lorsque je Push code pour libérer le serveur, je ne peux voir que carré au lieu de l'icône et dans l'onglet Console de Chrome, je reçois
GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404 (introuvable) test: 1
GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404 (introuvable) test: 1
GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404 (introuvable) test: 1
Je vous remercie.
J'ai eu ce problème et j'ai constaté que cela se produisait à cause de la minification lors de la construction en mode de libération.
Plutôt que de télécharger les fichiers manuellement à partir du site d'amorçage et de configurer le regroupement, j'utilise le paquet nuget qui le fait pour moi.
Si vous souhaitez le faire, suivez les étapes suivantes.
Exécutez la commande suivante pour installer Bootstrap:
Install-Package Twitter.Bootstrap.MVC
Ceci télécharge tous les fichiers bootrap et inclut la configuration prédéfinie du bundle Bootstrap ci-dessous:
public class BootstrapBundleConfig
{
public static void RegisterBundles()
{
// Add @Styles.Render("~/Content/bootstrap") in the <head/> of your _Layout.cshtml view
// For Bootstrap theme add @Styles.Render("~/Content/bootstrap-theme") in the <head/> of your _Layout.cshtml view
// Add @Scripts.Render("~/bundles/bootstrap") after jQuery in your _Layout.cshtml view
// When <compilation debug="true" />, MVC4 will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css"));
BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap-theme").Include("~/Content/bootstrap-theme.css"));
}
}
Ce qui précède inclut également des commentaires décrivant comment rendre les ensembles.
Je pense que l’erreur de police 404 originale était due au fait que le dossier des polices se trouvait à un niveau différent de celui spécifié dans le fichier css minifié.
Si vous préférez conserver votre solution actuelle, le seul moyen de réparer le 404 était de copier le dossier de polices à la racine de l'application Web.
Pour le tester localement, supprimez simplement debug="true"
de votre configuration Web pour enregistrer le déploiement sur AppHarbor.
Voici comment j'ai résolu le problème - J'utilise MVC5 et Bootstrap 3.1.1.
J'ai mes fichiers organisés dans le projet comme ceci:
/Content/Bootstrap/bootstrap.css
bootstrap.min.css
/Content/fonts/glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Ensuite, j'ai ajouté un autre niveau à mon chemin virtuel dans bundle config
bundles.Add(new StyleBundle("~/Content/site/css").Include(
"~/Content/bootstrap/bootstrap.css",
"~/Content/styles/site.css"
));
Auparavant j'avais utilisé ~/Content/css
Et dans la vue ...
@Styles.Render("~/Content/site/css")
Cela a fonctionné mais j'ai quand même eu un 404 sur l'une des polices ... alors j'ai ajouté la solution de Giles.
<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
<staticContent>
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".otf"/>
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".ttf" mimeType="font/ttf" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
Copier le dossier de polices à la racine de l’application Web et modifier les types MIME dans web.config en
<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
<staticContent>
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".otf"/>
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".ttf" mimeType="font/ttf" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
résolu le problème pour moi. Veuillez noter que le mimeType .woff est différent de celui de la question.
J'ai eu le même problème en utilisant IIS 7.5 Webserver.
La solution consistait à ajouter .woff à la liste des extensions de nom de fichier du type MIME application/octet-stream sur le serveur Web.
Vous pouvez également obtenir la même chose dans web.config:
<staticContent>
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
J'ai eu le même problème. Je ne sais pas vraiment pourquoi, mais si je supprime le fichier bootstrap.min.css et que je définis CssRewriteUrlTransform sur le bundle, tout fonctionne. J'utilise bootstrap v3.1.1
EDIT: Après quelques recherches, la solution est définie ici: CssRewriteUrlTransform n’est pas appelé Donc, supprimer Bootstrap.min.css ou faire référence à bootstrap.min.css au lieu de bootstrap.css forcera/minification sur votre fichier et il appellera donc CssRewriteUrlTransform.
J'ai eu le même problème. Je l'ai contourné en utilisant bootstrap CDN.
Dans la IgnoreRoute
, vous avez spécifié le dossier "Contenu". Essayez également d’en ajouter un pour les polices ", car c’est ce que vous demandez.
routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "fonts" });