Pourquoi font-awesome fonctionne sur localhost mais pas sur le web?
J'utilise une police géniale dans mon projet(mvc/asp.net). Mon problème est que je déboguais le projet et vérifiais localhost, il n'y avait aucun problème avec les icônes de police géniales. Mais lorsque le site Web a été publié et vérifié sur le Web, au lieu d’icônes, j’ai vu de petites boîtes. Je suis sûr qu'il est placé dans le bon répertoire (où les fichiers css ont été placés).
Je n'ai pas pu trouver de solution adéquate.
En passant, il n'y a pas non plus de problème avec les boutons. Ils sont tous ok mais les icônes ont disparu.
Merci
Je viens de charger votre page Web et de vérifier l'onglet net de Firebug.
vos urls suivantes ont renvoyé un 404:
http://www.senocakonline.com/Content/font/fontawesome-webfont.woff
http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf
je suppose que ceux qui manquent sont la raison pour laquelle vos icônes ne s'affichent pas.
UPDATE: 23.10.2015Pour le rendre disponible, ajoutez simplement ce code à votre configuration Web:
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
Pourquoi font-awesome fonctionne en mode débogage mais pas sous IIS?
Dans Visual Studio, par défaut, certains fichiers de polices ne sont pas inclus lors de la publication:
- .eot
- .json
- .ttf
- .woff
Cela est dû au fait que leur action build est définie sur None et qu'il s'agit par défaut (sur MVC, pas sur WebForms). Vous devez accéder aux propriétés du fichier concerné et le définir de "Aucun" à "Contenu".
Voici comment je l'ai résolu (pas en faisant glisser manuellement les fichiers comme certains pourraient le suggérer)
Les crédits vont à ce type: http://edsykes.blogspot.com/2012/09/aspnet-build-actions-with-ttf-eot-and.html
Une autre solution qui a résolu ce problème pour moi peut être trouvée ici: https://stackoverflow.com/a/12587256/615285
Citant à partir de là:
Le problème est probablement que les icônes/images dans les fichiers CSS utilisent des chemins d'accès relatifs. Par conséquent, si votre bundle ne réside pas dans le même chemin d'accès d'application que vos fichiers CSS dégroupés, ils deviennent des liens rompus.
La meilleure chose à faire est de faire en sorte que votre chemin de paquetage ressemble au répertoire css pour que les URL relatives fonctionnent, c'est-à-dire:
new StyleBundle("~/Static/Css/bootstrap/bundle")
Nous avons ajouté un support pour cela dans la version 1.1beta1, donc pour réécrire automatiquement les URL de l'image, vous pouvez ajouter un nouvel élément ItemTransform qui le rebase automatiquement.
bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
"~/Static/Css/bootstrap/bootstrap.css",
"~/Static/Css/bootstrap/bootstrap-padding-top.css",
"~/Static/Css/bootstrap/bootstrap-responsive.css",
"~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));
J'ai eu le même problème. La solution:
Ouvrez le fichier CSS, supprimez la section fonte-face actuelle et remplacez-le par ceux-ci:
@font-face { font-family: FontAwesome; src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */ url('/Content/fonts/fontawesomewebfont.svg'), url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */ font-weight: normal; font-style: normal; }(changez les valeurs de font-face comme vous voulez)
Copiez votre fichier de police ttf sur votre bureau puis convertissez-le en eot
Convertir le fichier de police ttf en svg
Conversion du fichier de police ttf en woff (facultatif)
Faites glisser et déposez toutes ces polices (ttf, eot, svg, woff ...) vers votre emplacement de fichier lorsque Visual Studio 2012 est ouvert.
Publiez votre projet
Cela dépend de la ligne de code dans BundleConfig:
BundleTable.EnableOptimizations = true;
si c'est vrai, vous devez changer le chemin de vos fichiers de polices;
../ est montre root path, main folder of your project. Et ensuite, vous devez écrire le reste du chemin.
Mien. Quand c'est vrai:
font-family: 'Icons';
src:url('../_include/css/fonts/Icons.eot');
src:url('../_include/css/fonts/Icons.eot?#iefix') format('embedded-opentype'),
url('../_include/css/fonts/Icons.woff') format('woff'),
url('../_include/css/fonts/Icons.ttf') format('truetype'),
url('../_include/css/fonts/Icons.svg#Icons') format('svg');
font-weight: normal;
font-style: normal;
Quand c'est faux:
font-family: 'Icons';
src:url('fonts/Icons.eot');
src:url('fonts/Icons.eot?#iefix') format('embedded-opentype'),
url('fonts/Icons.woff') format('woff'),
url('fonts/Icons.ttf') format('truetype'),
url('fonts/Icons.svg#Icons') format('svg');
font-weight: normal;
font-style: normal;
cela a fonctionné pour moi:
Je devais relier directement l'URL
C’est aussi un problème de type MIME dans IIS, il suffit d’ajouter l’extension de fichier .woff et cela fonctionnera
Rien n'a vraiment fonctionné pour moi. J'ai une page Webform qui héberge une application angululaire. L'application angulaire utilise les webfonts.
Le truc avec CssRewriteUrlTransform () était la bonne direction, mais ensuite j'ai trouvé cette extension pour le bunding qui a fait la solution finale!
Vous n'avez pas besoin d'utiliser l'extension de trou, copiez simplement la classe CssRewriteUrlTransformFixed et utilisez-la à la place de la classe d'origine.
Dans mon projet ASP.NET MVC avec regroupement activé dans BundleConfig.cs, voici ce qui a fonctionné:
Ouvrez le fichier font-awesome.css et remplacez @font-face par ceci:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
Je devais ajouter ../ avant chaque url.
J'ai eu le même problème. Les polices étaient affichées correctement en local, mais lorsque je les ai transférées sur le serveur, seules les cases vierges étaient affichées.
Cela peut parfois arriver parce que le nom de fichier mentionné dans l'attribut src du fichier CSS FontAwesome est différent du nom du fichier de police. Dans mon cas, je l'ai trouvé comme ceci dans le fichier css de Fontawesome:
@ font-face {
font-family: 'FontAwesome';
src: url ('../ font/fontawesome-webfont.eot? v = 3.2.1');
src: url ('../ font/fontawesome-webfont.eot? # iefix & v = 3.2.1') au format ('embedded-opentype'),
url ('../ font/fontawesome-webfont.woff? v = 3.2.1') format ('woff'),
url ('../ font/fontawesome-webfont_aea8981c.ttf? v = 3.2.1') format ('type exact'),
url ('../ font/fontawesome-webfont.svg # fontawesomeregular? v = 3.2.1') format ('svg');
poids de la police: normal;
style de police: normal;
}
Mais les noms de fichiers de polices actuels ressemblent à ceux -
font/fontawesome-webfont_2d2816fe.eot font/fontawesome-webfont_aea8981c.eot font/fontawesome-webfont_aea8981c.ttf font/fontawesome-webfont_aea8981c.woff
bien que le nom ne corresponde pas correctement dans le fichier css après le soulignement, cela fonctionnait très bien en local. Il était donc difficile de dire quelle était la cause probable de cela.
Lorsque j'ai modifié le nom du fichier dans le fichier css src de FontAwesome en lui donnant les noms exacts, cela a fonctionné .
J'ai essayé toutes les suggestions ci-dessus et aucune d'entre elles ne fonctionne. Ensuite, j'ai essayé de déplacer le fichier de police CSS dans un fichier CSS différent, et la magie s'est produite. Tout commence à fonctionner sans aucun problème. Notez que vous pouvez ultérieurement intégrer un nouveau fichier CSS via votre fichier d’ensemble.