title: Bootstrap 3 glyphicons not displaying correctly
body: <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>