Algunos de los glyphicons Bootstrap3 no se muestran correctamente en la vista previa de phonegap android

Por favor, eche un vistazo a esta captura de pantalla adjunta . Es mi aplicación de prueba PhoneGap – tomada en un Galaxy S4.

Debería ver que los iconos de timbre, marcador, maletín y cámara (y más) no se muestran como se esperaba.

Aquí están mis observaciones:

  1. Todos los iconos se pueden mostrar correctamente en los navegadores (cromo, safari), tanto en PC como en dispositivos móviles
  2. Todos los iconos se pueden mostrar correctamente en la misma aplicación para ios (comprobado en iphone / ipad, ios7)

El "signo de interrogación" sólo se puede ver en una aplicación de Android.

¿Alguien sabe la razón por qué?

Es un problema con las secuencias de escape. Si puede mantener de manera fiable un archivo CSS codificado con UTF-8, podría anular los valores predeterminados de Bootstrap para usar los glifos reales no escindidos.

(Dependiendo de su navegador, el código siguiente aparecerá para contener un montón de cajas.) Copiar el código y pegarlo en un documento UTF-8 debería conservar los valores.

@charset "UTF-8"; .glyphicon-bell:before { content: "🔔"; } .glyphicon-bookmark:before { content: "🔖"; } .glyphicon-briefcase:before { content: "💼"; } .glyphicon-calendar:before { content: "📅"; } .glyphicon-camera:before { content: "📷"; } .glyphicon-fire:before { content: "🔥"; } .glyphicon-lock:before { content: "🔒"; } .glyphicon-paperclip:before { content: "📎"; } .glyphicon-pushpin:before { content: "📌"; } .glyphicon-wrench:before { content: "🔧"; } 

También puede cambiar las secuencias de escape para solucionar este problema, pero el soporte del navegador varía. Si solo tiene como objetivo Android / BlackBerry, lo siguiente debería funcionar correctamente:

 .glyphicon-bell:before { content: "\d83d\dd14"; } .glyphicon-bookmark:before { content: "\d83d\dd16"; } .glyphicon-briefcase:before { content: "\d83d\dcbc"; } .glyphicon-calendar:before { content: "\d83d\dcc5"; } .glyphicon-camera:before { content: "\d83d\dcf7"; } .glyphicon-fire:before { content: "\d83d\dd25"; } .glyphicon-lock:before { content: "\d83d\dd12"; } .glyphicon-paperclip:before { content: "\d83d\dcce"; } .glyphicon-pushpin:before { content: "\d83d\dccc"; } .glyphicon-wrench:before { content: "\d83d\dd27"; } 

Podría ser debido a la incompatibilidad entre la versión del archivo bootstrap min .css y los archivos de glifo.

  • ¿Por qué este CSS no funciona para Chrome en Android pero funciona en cualquier otro sitio?
  • Respuesta de Bootstrap en dispositivos móviles
  • Twitter bootstrap tema de Holo
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.