Bootstrap 3 glyphicons de ne pas s'afficher correctement

Je suis en utilisant Bootstrap 3 glyphicons sur un site web. Il fonctionne très bien sur tous les navigateurs, mais pas sur certains appareils comme il se présente comme un point d'interrogation.

J'ai trouvé ce correctif: Certains de Bootstrap3 glyphicons ne sont pas affichés correctement sur phonegap android webview qui résout le problème sur les appareils mais maintenant, le glyphicon ne fonctionne pas dans Firefox. (Je suis en substituant l'Amorçage par défaut pour utiliser le réel, non échappé glyphes dans mon CSS.) Je me demandais si il existe un moyen d'écrire un peu de jquery en utilisant une détection du navigateur pour Firefox pour supprimer le remplacer dans mon fichier CSS et il revient à Bootstrap CSS.

J'ai trouvé ce plugin jQuery pour la détection du navigateur: https://github.com/gabceb/jquery-browser-plugin

Code:
JS

if ( $.browser.mozilla ) {
    $('a#calendar span').removeClass('glyphicon-calendar');
    $('a#calendar span').css({'glyphicon-calendar:before': 'content: "f4c5"'});
    }

CSS pour remplacer Bootstrap

/* fix glyph not showing on some devices--override the Bootstrap defaults to use the actual, non-escaped glyphs */ 
.glyphicon-calendar:before { 
  content: "\d83d\dcc5";
  }

Bootstrap CSS

.glyphicon-calendar:before {
content: "f4c5";
}

Merci pour votre aide.

Pourriez-vous s'il vous plaît avoir un coup d'oeil à ma réponse sur Bootstrap glyphicon apparaît pas dans le Formulaire?

OriginalL'auteur PDIuserr | 2013-11-27

Vous pouvez utiliser un .glyphicon-nonescaped classe, pour vous permettre de basculer entre le défaut s'est échappé et non échappé glyphes :

HTML

<i class="glyphicon glyphicon-calendar glyphicon-nonescaped"></i>

CSS

.glyphicon-nonescaped.glyphicon-calendar:before { 
    content: "\d83d\dcc5";
}

jQuery

if($.browser.mozilla) {
    $('.glyphicon-nonescaped').removeClass('glyphicon-nonescaped');
}

Les travaux de cette. Merci!!!!

OriginalL'auteur zessx

La solution ci-dessus fonctionne très bien pour les différents OS. Vous pouvez ajouter ce code à votre css fichier et il pourrait fonctionner pour les sans-codes d'appareils:

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

OriginalL'auteur 1453939

Pour éviter l'utilisation de Javascript, vous pouvez utiliser des requêtes de média dans le CSS à la place:

Pour Firefox:

@-moz-document url-prefix() { 
         .glyphicon-nonescaped.glyphicon-calendar:before {
             content: "\d83d\dcc5";
         }
    }

Pour IE 8+:

@media screen@media screen\0 { 
.glyphicon-nonescaped.glyphicon-calendar:before {
content: "\d83d\dcc5";
}
}
 { 
       .glyphicon-nonescaped.glyphicon-calendar:before {
           content: "\d83d\dcc5";
       }
}

OriginalL'auteur aloha

Vous devez vous connecter pour publier un commentaire.