Bootstrap 3 glyphicons not displaying correctly
glyphicons, twitter-bootstrap, twitter-bootstrap-3
Solution
You could use a `.glyphicon-nonescaped` class, to allow you to switch between default escaped and non-escaped glyphs :
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');
}
Problem
I am using Bootstrap 3's glyphicons on a website. It works fine across browsers but not on certain devices as it shows up as a question mark. I found this fix: Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview which fixes the problem on the devices but now the glyphicon is not working in Firefox. (I am overriding the Bootstrap defaults to use the actual, non-escaped glyphs in my CSS.) I was wondering if there is a way to write some jquery using a browser detection for Firefox to remove the override in my CSS file and revert it back to Bootstrap's CSS. I found this jQuery plugin for browser detection: 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: "\1f4c5"'}); } ``` CSS to override 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's CSS ``` .glyphicon-calendar:before { content: "\1f4c5"; } ``` Thank you for your help.