Font Awesome 4.1.0 funktioniert nicht im Cordova Android Emulator

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

Frage

Ich kann nicht herausfinden, warum Font Awesome-Symbole in meiner Cordova-App nicht angezeigt werden.

Ich habe den gesamten Ordner font-awesome heruntergeladen und in den Ordner meines Projekts kopiert.Ich habe den Ordner beigefügt:

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

Ich bin mir sicher, dass dies richtig ist, weil <i class="fa fa-bars fa-2x"></i> wird in Chrom einwandfrei angezeigt.

Aber wenn ich renne cordova emulate android die Symbole werden in meinem Android-Emulator nicht angezeigt.

Ich habe dann versucht, die Fehlerbehebung hier zu verfolgen: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Es scheint, dass die Fehlerbehebung der Meinung ist, dass dies ein Fehler ist, der damit zusammenhängt text-rendering, aber wenn ich hinzufüge text-rendering: auto; zu .fa { } sowohl im minimierten als auch im vollständigen CSS sehe ich die Symbole in meinem Android-Emulator immer noch nicht.

Ich weiß nicht, was ich tun soll.Mein Android-Zielprojekt ist 4.4.2 api Level 19.Kann mir jemand helfen?

Hier ist der HTML-Abschnitt zu den Symbolen.

<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>
War es hilfreich?

Lösung 2

Meine eigene Frage beantworten...

Ich habe den FontAwesome-Ordner in meinen Projektordner kopiert, aber bei Verwendung von cordova emulate android der Ordner Font Awesome wurde nicht erstellt.Das Kopieren des FontAwesome-Ordners in den CSS-Ordner und das Ändern der zugehörigen Linkpfade haben dieses Problem behoben.

Andere Tipps

Ich hatte das gleiche Problem mit der Android 4.0.3 Cordova App.In meinem Fall musste ich den Versionsparameter (v = 4.1.0) aus der URL entfernen.Beispielsweise:

Alter Block in Schrift-genial.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;
}

Neuer Block in Schrift-genial.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;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top