Bootstrap loading wrong glyphicon

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>

Try putting bootstrap.css the last on the list to see if your other CSS files are interfering with it. — PM 77-1, Mar 24 '14 at 02:05
That did not work. I put the bootstrap.css below all my css files, and even my js links. — Andrew Pullins, Mar 31 '14 at 21:31
I posted your code into **my** template and it obviously worked fine. Try referencing [Bootstrap CDN](http://www.bootstrapcdn.com/) instead of your local files. — PM 77-1, Mar 31 '14 at 21:40
I don't understand I tried the link you posted and it worked, so I thought maybe I messed with the bootstrap.css file and redownloaded it. but when I use the newly downloaded bootstrap.css file it still does not work. I even used the bootstrap.min.css and that did not work ether. — Andrew Pullins, Apr 01 '14 at 03:46
Have you tried *fresh* `bootstrap.min.js` as well? My suggestion is to download both `css` and `js` from **CDN** links. — PM 77-1, Apr 01 '14 at 04:59

score 0 · Accepted Answer · answered Jun 05 '15 at 11:54

0

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!

answered Jun 05 '15 at 11:54

Adil

21,278
7
27
54

1

So this is interesting and I don't remember if I ever fixed this problem but I'll try this. Back then I probably did have all my assets all messed up. Did you consider putting your bootstrap CSS files in your CSS files? This why it would be next to the fonts folder. Or did you mean that you placed the fonts in the bootstrap folder? – Andrew Pullins Jun 05 '15 at 12:07
Nope i didn't placed the fonts in bootstrap folder, rather just placed besides bootstrap folder. I mean the fonts folder & the bootstrap folder (with bootstrap css files inside) should be at the same level. – Adil Jun 05 '15 at 13:09
So yah you could put the boot strap files in your CSS folder and achieve the same results. – Andrew Pullins Jun 05 '15 at 13:12
Yeah exactly, actually the earlier hierarchy was in the same manner but increase in css files was the reason for creating separate bootstrap folder for bootstrap css files. – Adil Jun 05 '15 at 13:15
That's what I thought might be the reason. I have seen projects start to have many CSS sheets. I try to keep it to a reset CSS, bootstrap CSS, and custom CSS. This dose not always work out as some pages may have very specific needs and therefor don't need to me apart of the main custom sheets. – Andrew Pullins Jun 05 '15 at 13:21
ahaan, so its mean my answer will surely be your answer ;) – Adil Jun 05 '15 at 13:24
I have not tested it but yes I do believe your answer will be the one to answer this question. – Andrew Pullins Jun 05 '15 at 13:25
Ok hopefully you'll test it soon and mark it as answer. I'm in fact trying to create a template in bootstrap & foundation for giving option to my clients to either use bootstrap based version or foundation based. That's why I created separate folders for Bootstrap & Foundation. – Adil Jun 05 '15 at 13:34

Bootstrap loading wrong glyphicon

1 Answers1

Linked