Bootstrap 3 glyphicons not displaying correctly

Question

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.

Answer 1

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');
}

Answer 2

The solution above works great for various OS. You might add this code to your css file and it might work for no-device codes:

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

Answer 3

To avoid using Javascript, you can use media queries in the CSS instead:

For Firefox:

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

For IE 8+:

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