0

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.

image of mis-formatted glyphicon

<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?

Community
  • 1
  • 1
Austin A
  • 2,990
  • 6
  • 27
  • 42
  • Are you sure that the font is loaded at all? – meskobalazs Jan 12 '15 at 08:32
  • 1
    Are there any failed network requests? This behavior typically means the font file failed to load and the CSS is creating a unicode character that can't be interpreted. – rockerest Jan 12 '15 at 08:32
  • And yet, it works perfectly fine in a --> [**FIDDLE**](http://jsfiddle.net/x8ory16h/) – adeneo Jan 12 '15 at 08:33
  • After looking at @Shikhar Bhardwaj's response, it looks like that this is most likely the issue. I'll try it in a few hours and see if that works. At the time, I didn't relate this issue to a browser issue, simply thought something was messed up with my approach. – Austin A Jan 12 '15 at 19:33
  • Tried @Shikhar's solution but it didn't work. Check the update. – Austin A Jan 13 '15 at 06:01
  • Do you have "font-family : 'Some font' !important;" in any of the css? – Aakash Jan 13 '15 at 06:25
  • What path is it showing for the fonts that are not downloaded? – bluefog Jan 13 '15 at 08:26
  • @Aakash, I don't have the !important after font-family in my bootstrap.min.css. @Shikhar Bhardwaj, its failing on the `file:///Users/name/code/js/bootstrap-3.3.1/dist/fonts/glyphicons-halflings-regular.woff` and `file:///Users/name/code/js/bootstrap-3.3.1/dist/dist/fonts/glyphicons-halflings-regular.ttf`. Any thoughts? – Austin A Jan 13 '15 at 18:25
  • @AustinA Great you figured it out. Post an answer so that it helps people. :) – bluefog Jan 17 '15 at 13:47
  • Just added it. You should have left your answer because that is a common issue with bootstrap and firefox. – Austin A Jan 17 '15 at 14:40

2 Answers2

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/
Austin A
  • 2,990
  • 6
  • 27
  • 42
1

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.

Carlitos way
  • 11
  • 1