Bootstrap 3 Glyphicons not working in Firefox only

Question

I m working in bootstrap with latest version Glyphicons of carousel is not in Firefox. In Firefox icon show as a content like content:/e080.

Here is my Code :-

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
            <div class="embed-responsive embed-responsive-16by9" style="height:650px;">
                <video autoplay loop class="embed-responsive-item">
                    <source src="../video/ops.mp4" type=video/mp4 >
                </video>
            </div>
        </div>

      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

Try this solution http://stackoverflow.com/questions/24232827/bootstrap3-1-1-glyphicons-not-working-in-firefox?rq=1 — Akhil Namboothiri, Feb 19 '15 at 11:34

score 2 · Answer 1 · answered Jun 03 '15 at 21:43

This is probably because you have not download or install the glyphicons fonts on your page. If you use MaxCDN library, it will be already included. Here is what you need to put add onto your page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

You would probably have a old bootstrap CSS link like this:

<link href="css/bootstrap.min.css" rel="stylesheet">

All you need to do is to delete it. If your server is fast or you don't want to MaxCDN, you can download the glyphicons fonts. Open your console and there would be one or two 404 error. Find the file that the browser is looking for and download the need file to it's position. Here is the download links:

TTF: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.ttf`

WOLF2: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.wolf2

WOLF: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.wolf

EOT: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.eot

But anyway, I suggest the first option, since it faster for me and work better.

score 0 · Answer 2 · answered Feb 19 '15 at 05:04

following example shows how to create a basic carousel

   <div id="myCarousel" class="carousel slide">
     <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
   </ol>   
  <div class="carousel-inner">
  <div class="item active">
      <img src="/bootstrap/images/slide1.png" alt="First slide">
   </div>
 </div>
  <a class="carousel-control right" href="#myCarousel" 
     data-slide="next">&rsaquo;</a>

Bootstrap 3 Glyphicons not working in Firefox only

2 Answers2