Bootstrap 3 Glyphicons not showing correctly

Question

I haven't had much issue picking up bootstrap so far, however tonight I tried integrating glyphicons inside a navbar element and have been unable to get it to work. The image shows the character that appears in the glyphicons place; code below it.

<link href="/userpath/code/js/bootstrap-3.3.1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap theme -->
<link href="/userpath/code/js/bootstrap-3.3.1/dist/css/bootstrap-theme.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
 <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">name</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">  About Me</a></li>
      <li><a class="navbar-link" href="#"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>  Projects</a></li>
      <li><a href="#">  Past</a></li>
      <li><a href="#">  Free Time</a></li>
    </ul>
  </div>
</nav>

I first consorted the BS3 documentation like any reasonable person and found this.

Only for use on empty elements: Icon classes should only be used on elements that contain no text content and have no child elements.

Not feeling 100% satisfied with that, I found a number of examples showing icons within button objects. One demo is here . This led me to believe that my problem went beyond compatibility with BS3. I continued looking and found this helpful post saying to redownload the source code for the font files. The problem was still there after trying this. I've also double checked that my bootstrap.min.css is formatted correctly. For those who might still think that this is a navbar issue, I tried implementing a button seen in the demo but have the same issue with that.

Do I need to explicitly format the glyphicons in the .css? From what I've read, I have everything I need for this to work correctly. Please let me know what I'm doing wrong.

For those who care, I'm using Mozilla 34.0.5 on a Mac Book Pro OSX 10.9.5 (not that OS should matter).

UPDATE

I attempted Shikar's suggestions but couldn't get them to work. When I looked in my bootstrap.min.css, I saw src:url(../fonts/glyphicons...) . I made two attempts to change these urls. The first I simply deleted the .. before /fonts/ . This changed nothing. I then realized that I've put my bootstrap in a separate directory so I called the files explicitly by putting `/Users/myname/explicitPath/bootstrap-3.3.1/dist/fonts/glyphicons-halflings-regular.eot) along with the other four glyphicon urls mentioned in this area of the .css. This also didn't work. Taking @rockerest 's advice, I looked in the FF's webdev tool and see two failed downloads with the downloadable font. The filepath for for these errors don't have any mistaks but am I misunderstanding how to use bootstrap locally? Can I not use local filepaths in the bootstrap.min.css?

Answer 1

So my problem ended up being where bootstrap was in relation to my index.html. Below is the file structure before and after. I was hoping to just have a general bootstrap folder that I could point to file developing multiple web app ideas, but it looks like boot strap is required to be at the same level as your index.html. By moving bootstrap into the same directory as the index.html, executing grunt dist in the bootstrap directory and using the explicit path of the bootstrap.min.css in .html references, I was able to get things to work properly. Wish I had a better understanding as to why this worked though.

Before                    After
├── webpage/              └── webpage/
|   └──index.html             ├──index.html
|                             └──bootstrap/
└── js/
    └──bootstrap/

Answer 2

had a similar problem, solved it putting the fonts directory in the same directory where the css folder is located. For example if css folder is placed in the root directory place the fonts folder in the root.