2012-11-21 1 views
5

Lorsque j'ajoute jqm-icon-pack-2.1.2-fa.css à mon site Web, les polices de l'interface utilisateur jQuery ne s'affichent pas. Si je supprime la référence, ils montrent. Je crée une application mobile MVC4 en utilisant Visual Studio 2012. Voici comment je fais référence les fichiers CSS:Police Des icônes impressionnantes entrent en conflit avec les icônes de l'interface utilisateur jQuery

<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile-1.2.0.css")" type="text/css"> 
<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile.structure-1.2.0.css")" type="text/css"> 
<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile.theme-1.2.0.css")" type="text/css"> 
<link rel="stylesheet" href="@Url.StaticStylesheet("jqm-icon-pack-2.1.2-fa.css")" type="text/css"> 

Si je retire la dernière référence, les icônes jQuery travail, mais les icônes Impressionnant police se font pas travail. J'ai essayé de réorganiser les références et cela n'a pas fonctionné. J'ai inspecté la page avec Firebug et je ne vois pas de différence. J'ai veillé à ce que les chemins soient corrects. Je souhaite publier un lien vers mon site Web, mais il se trouve dans un extranet, donc il n'est pas accessible. Le mieux que je peux offrir est de définir une entrée pour type = "search" et l'icône de recherche et l'icône de texte en clair n'apparaissent pas. Toute aide serait grandement appréciée !! REPONSE: J'ai résolu le problème et, avec un peu de chance, je peux épargner aux autres un peu de chagrin et des heures de battre la tête sur le clavier comme je l'ai fait! Lorsque vous utilisez le Gestionnaire de packages NuGet pour obtenir jQuery mobile, il ajoute des fichiers image nommés icons-18-black.png, icons-18-white.png, icons-36-black.png et icons-36-white.png. Si vous ne faites pas attention, vous pouvez manquer le fait qu'il existe des fichiers image légèrement différents sur le site Web github que vous devez inclure avec Font Awesome appelé icons-18-black-pack.png, icons-18-white-pack.png , icons-36-black-pack.png et icons-36-white-pack.png. Notez que le mot "pack" est inclus dans le nom de ces fichiers et qu'ils sont légèrement différents des fichiers originaux inclus avec jQuery mobile. Assurez-vous simplement d'ajouter dans les fichiers manquants plus le fichier ajax-loader.png qui est différent du fichier ajax-loader.gif inclus avec jQuery mobile et tout devrait fonctionner.

+1

Vous devez éditer la réponse à votre question et l'afficher comme réponse réelle à votre question et la marquer comme acceptée. De cette façon, lorsque les gens voient votre question, ils peuvent voir qu'il existe une solution de travail. – Jack

+0

Désolé, j'ai dû attendre avant de pouvoir poster la réponse à ma propre question. Je ne sais pas pourquoi c'est mais être cela car il se peut que j'ai posté la réponse. Merci! – Darrell

Répondre

3

J'ai résolu le problème et j'espère pouvoir sauver d'autres personnes de chagrin et des heures de battre la tête sur le clavier comme je l'ai fait! Lorsque vous utilisez le Gestionnaire de packages NuGet pour obtenir jQuery mobile, il ajoute des fichiers image nommés icons-18-black.png, icons-18-white.png, icons-36-black.png et icons-36-white.png. Si vous ne faites pas attention, vous pouvez manquer le fait qu'il existe des fichiers image légèrement différents sur le site Web github que vous devez inclure avec Font Awesome appelé icons-18-black-pack.png, icons-18-white-pack.png , icons-36-black-pack.png et icons-36-white-pack.png. Notez que le mot "pack" est inclus dans le nom de ces fichiers et qu'ils sont légèrement différents des fichiers originaux inclus avec jQuery mobile. Assurez-vous simplement d'ajouter dans les fichiers manquants plus le fichier ajax-loader.png qui est différent du fichier ajax-loader.gif inclus avec jQuery mobile et tout devrait fonctionner.

Questions connexes