wake-up-neo.net

Einige Bootstrap3-Glyphicons werden in der Phonegap-Android-Webansicht nicht richtig angezeigt

Bitte sehen Sie sich diesen Screenshot an . Es ist meine PhoneGap-Test-App - aufgenommen auf einem Galaxy S4.

Sie sollten sehen, dass die Klingel, das Lesezeichen, der Aktenkoffer und die Kamerasymbole (und mehr) nicht wie erwartet angezeigt werden.

Hier sind meine Beobachtungen:

  1. Alle Symbole können in Browsern (Chrome, Safari) sowohl auf dem PC als auch auf mobilen Geräten korrekt angezeigt werden
  2. Alle Icons können in der gleichen App für ios korrekt angezeigt werden (aktiviert in iphone/ipad, ios7)

Das "Fragezeichen" ist nur in einer Android-App sichtbar.

Weiß jemand den Grund dafür?

20
Liu Xiaolu

Es ist ein Problem mit den Escape-Sequenzen. Wenn Sie eine UTF-8-kodierte CSS-Datei zuverlässig verwalten können, können Sie die Bootstrap-Standardeinstellungen überschreiben, um die tatsächlichen, nicht mit Escapezeichen versehenen Glyphen zu verwenden.

(Je nach Browser scheint der folgende Code eine Reihe von Boxen zu enthalten. Wenn Sie den Code kopieren und in ein UTF-8-Dokument einfügen, sollten die Werte jedoch erhalten bleiben.)

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

Sie können auch die Escape-Sequenzen ändern, um dieses Problem zu umgehen, die Browserunterstützung ist jedoch unterschiedlich. Wenn Sie nur auf Android/BlackBerry ausgerichtet sind, sollte Folgendes funktionieren:

.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

Möglicherweise liegt ein Konflikt zwischen der Version der Bootstrap-min-.css-Datei und den Glyph-Dateien vor. 

0
Pushpendra