android - usar - no se ven los iconos html

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

Question

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 campana, marcador, maletín e 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 (chrome, safari), tanto en PC como en dispositivos móviles
2. Todos los iconos se pueden mostrar correctamente en la misma aplicación para ios (marcada en iphone / ipad, ios7)

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

¿Alguien sabe el motivo por qué?

Answer 1

Podría deberse a una falta de coincidencia entre la versión del archivo bootstrap min .css y los archivos glyph.

Answer 2

Es un problema con las secuencias de escape. Si puede mantener de manera confiable un archivo CSS codificado en UTF-8, puede anular los valores predeterminados de Bootstrap para usar los glifos reales no escapados.

(Dependiendo de su navegador, el siguiente código parecerá contener un montón de cuadros. Sin embargo, copiar el código y pegarlo en un documento UTF-8 debería preservar 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 está orientado a Android / BlackBerry, lo siguiente debería funcionar bien:

.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";
}