web-dev-qa-db-fra.com

Certains glyphicons Bootstrap3 ne s'affichent pas correctement sur la visualisation Web phonegap Android

Veuillez regarder cette capture d'écran jointe . C'est mon application de test PhoneGap - prise sur un Galaxy S4.

Vous devriez voir que les icônes de sonnerie, de signet, de porte-documents et d'appareil photo (et plus) ne s'affichent pas comme prévu.

Voici mes observations:

  1. Toutes les icônes peuvent être affichées correctement dans les navigateurs (chrome, safari), sur les ordinateurs personnels et mobiles
  2. Toutes les icônes peuvent être affichées correctement dans la même application pour iOS (vérifiées dans iphone/ipad, ios7)

Le "point d'interrogation" ne peut être vu que dans une application Android.

Est-ce que quelqu'un sait pourquoi?

androidtwitter-bootstrapcordovatwitter-bootstrap-3glyphicons
20
Liu Xiaolu

C'est un problème avec les séquences d'échappement. Si vous pouvez conserver de manière fiable un fichier CSS codé UTF-8, vous pouvez remplacer les valeurs par défaut de Bootstrap pour utiliser les glyphes réels non échappés.

(En fonction de votre navigateur, le code suivant semblera contenir un tas de cases. Le copier et le coller dans un document UTF-8 devrait toutefois conserver les valeurs.)

@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: "????";
}

Vous pouvez également modifier les séquences d'échappement pour résoudre ce problème, mais la prise en charge du navigateur varie. Si vous ciblez uniquement Android/BlackBerry, les éléments suivants devraient fonctionner correctement:

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

Cela pourrait être dû à une discordance entre la version du fichier bootstrap min .css et les fichiers glyphes. 

0
Pushpendra