Font Awesome 4.1.0 no funciona en el emulador de Android Cordova

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

Pregunta

No puedo entender por qué los íconos de Font Awesome no aparecen en mi aplicación Cordova.

Descargué toda la carpeta font-awesome y la copié en la carpeta de mi proyecto.He incluido la carpeta con:

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

Estoy seguro de que esto es correcto porque <i class="fa fa-bars fa-2x"></i> Se mostrará en Chrome perfectamente bien.

Sin embargo, cuando corro cordova emulate android Los íconos no aparecen en mi emulador de Android.

Luego intenté seguir la solución de problemas aquí: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Parece que la solución de problemas cree que se trata de un error relacionado con text-rendering, pero cuando agrego text-rendering: auto; a .fa { } Tanto en el CSS minimizado como en el completo, todavía no veo los íconos en mi emulador de Android.

No sé qué hacer.Mi proyecto de destino de Android es 4.4.2 api nivel 19.¿Alguien puede ayudar?

Aquí está la sección html relacionada con los íconos.

<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>
¿Fue útil?

Solución 2

Respondiendo a mi propia pregunta...

Copié la carpeta FontAwesome en la carpeta de mi proyecto pero cuando la usé cordova emulate android la carpeta Font Awesome no se estaba creando.Copiar la carpeta FontAwesome en la carpeta CSS y cambiar las rutas de los enlaces relacionados corrigió este problema.

Otros consejos

Tuve el mismo problema en la aplicación Cordova de Android 4.0.3.En mi caso tuve que eliminar el parámetro de versión (v=4.1.0) de la URL.Por ejemplo:

Bloque antiguo en 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;
}

Nuevo bloque en 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;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top