Bootstrap loading wrong glyphicon

StackOverflow https://stackoverflow.com/questions/22583025

  •  19-06-2023
  •  | 
  •  

Question

Hello I am tyring to use bootstraps glyphicons but they are not working. Im trying to load glyphicon-ok, glyphicon-remove, and glyphicon-star. but the problem is that these icons load instead. http://imagebin.org/301047

heres my head secion

      <head>
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
           <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css">
           <link href="css/styles.css" rel="stylesheet" type="text/css">
           <script src="http://code.jquery.com/jquery-latest.js"></script>
           <script src="js/bootstrap.min.js"></script>
      </head>

here is my glyphicons

      <li>
        <a href="#">
          <span class="glyphicon glyphicon-ok"></span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="glyphicon glyphicon-remove"></span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="glyphicon glyphicon-star"></span>
        </a>
      </li>
Was it helpful?

Solution

I was also facing the same issue and the only thing that worked for me is the change in hierarchy of my project's folders. For better understanding, below mentioned are both of my project's folders hierarchies:

**Earlier(problematic):**
-Public
  --CSS
     ---Bootstrap
         ----bootstrap.min.css
         ----bootstrap.css           
  --Fonts
  --Images
  --JS

**Latest (Solution)**
-Public
  --CSS
     ---Bootstrap
         ----bootstrap.min.css
         ----bootstrap.css           
     ---Fonts
  --Images
  --JS

In short must place the 'Fonts' folder besides 'Bootstrap' folder!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top