Подтвердить что ты не робот

Некоторые из глификонов Bootstrap3 отображаются некорректно на веб-сайте phonegap android webview

Пожалуйста, посмотрите этот прикрепленный скриншот. Это приложение для тестирования PhoneGap, сделанное на Galaxy S4.

Вы должны увидеть, что значки звонка, закладки, портфеля и камеры (и более) не отображаются, как ожидалось.

Вот мои наблюдения:

Все значки могут отображаться правильно в браузерах (хром, сафари), как на ПК, так и на мобильных устройствах.
Все значки могут отображаться корректно в одном приложении для ios (проверено в iphone/ipad, ios7)

"Вопросительный знак" можно увидеть только в приложении для Android.

Кто-нибудь знает причину?

Ответ 1

Это проблема с escape-последовательностями. Если вы можете надежно поддерживать файл CSS с кодировкой UTF-8, вы можете переопределить значения по умолчанию для Bootstrap, чтобы использовать фактические, неэкранированные глифы.

(В зависимости от вашего браузера следующий код будет содержать кучу ящиков. Копирование кода и вставка его в документ UTF-8 должны сохранять значения.)

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

Вы также можете изменить escape-последовательности, чтобы обойти эту проблему, но поддержка браузера варьируется. Если вы ориентируетесь только на Android/BlackBerry, следующее должно работать нормально:

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

Ответ 2

Это может быть из-за несоответствия между версией файла bootstrap min.css и файлов глифов.