StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBootstrap 3 glyphicons not displaying correctly
text
Body
copied!<p>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. </p> <p>I found this fix: <a href="https://stackoverflow.com/questions/19417040/some-of-bootstrap3-glyphicons-are-not-displayed-correctly-on-phonegap-android-we/19443169#19443169">Some of Bootstrap3 glyphicons are not displayed correctly on phonegap android webview</a> 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.</p> <p>I found this jQuery plugin for browser detection: <a href="https://github.com/gabceb/jquery-browser-plugin" rel="nofollow noreferrer">https://github.com/gabceb/jquery-browser-plugin</a></p> <p>Code:<br> JS </p> <pre><code>if ( $.browser.mozilla ) { $('a#calendar span').removeClass('glyphicon-calendar'); $('a#calendar span').css({'glyphicon-calendar:before': 'content: "\1f4c5"'}); } </code></pre> <p>CSS to override Bootstrap</p> <pre><code>/* fix glyph not showing on some devices--override the Bootstrap defaults to use the actual, non-escaped glyphs */ .glyphicon-calendar:before { content: "\d83d\dcc5"; } </code></pre> <p>Bootstrap's CSS</p> <pre><code>.glyphicon-calendar:before { content: "\1f4c5"; } </code></pre> <p>Thank you for your help.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload