Bootstrap 3 glyphics not displaying correctly

Question

I am using Bootstrap 3 glyphics on a website. It works great in browsers, but not on some devices, as it appears as a question mark.

I found this fix: Some of Bootstrap3 glyphics do not display correctly on the phonegap android webview website , which fixes the issue on devices, but now the glyphicon doesn’t work in Firefox, (I am redefining Bootstrap boot settings to use actual, unscreened glyphs in my CSS. ) I was wondering if there is a way to write some jquery using browser detection for Firefox to remove the override in my CSS file and bring it back to Bootstrap CSS.

I found this jQuery browser detection plugin: 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";
  }

Boot CSS

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

Thank you for your help.

Answer 1

You can use the class .glyphicon-nonescapedso that you can switch between default escaped and unescaped 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 OSs. You can add this code to your cssfile, and it can work for non-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

Javascript, - CSS:

Firefox:

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

IE 8 +:

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