Font Awesome 4.1.0 ne fonctionne pas dans l'émulateur Android Cordova

StackOverflow https://stackoverflow.com//questions/25022589

Question

Je n'arrive pas à comprendre pourquoi les icônes Font Awesome n'apparaissent pas dans mon application Cordova.

J'ai téléchargé l'intégralité du dossier font-awesome et je l'ai copié dans le dossier de mon projet.J'ai inclus le dossier avec :

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

Je suis certain que c'est exact parce que <i class="fa fa-bars fa-2x"></i> s'affichera parfaitement en chrome.

Cependant, quand je cours cordova emulate android les icônes n'apparaissent pas dans mon émulateur Android.

J'ai ensuite essayé de suivre le dépannage ici : https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Il semble que le dépannage pense qu'il s'agit d'une erreur liée à text-rendering, mais quand j'ajoute text-rendering: auto; à .fa { } dans les CSS minifiés et complets, je ne vois toujours pas les icônes dans mon émulateur Android.

Je ne sais pas quoi faire.Mon projet cible Android est l'API 4.4.2 niveau 19.Quelqu'un peut-il m'aider ?

Voici la section html relative aux icônes.

<body> 
    <div id="main">
           <div id="top">
               <i id="settings" class="fa fa-bars fa-2x"></i>
               <p id="logo" > Chowza Inc </p>
          </div>
    </div>
...
</body>
Était-ce utile?

La solution 2

Répondre à ma propre question...

J'ai copié le dossier FontAwesome dans mon dossier de projet mais lors de l'utilisation cordova emulate android le dossier Font Awesome n'était pas en cours de création.La copie du dossier FontAwesome dans le dossier CSS et la modification des chemins de liens associés ont corrigé ce problème.

Autres conseils

J'ai eu le même problème sur l'application Android 4.0.3 Cordova.Dans mon cas, j'ai dû supprimer le paramètre de version (v=4.1.0) de l'URL.Par exemple:

Ancien bloc dans font-awesome.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Nouveau bloc dans font-awesome.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top