Bootstrap 3 Glyphicons not showing correctly

Tags: javascript,html,css,twitter-bootstrap,glyphicons

Problem :

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

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).


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?

Solution :

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/

    CSS Howto..

    How do I display the first image from each div with .className?

    How can I test websites for Mobile Devices

    How can we control the size of a special character?

    How to override the external CSS using some condition in Jquery?

    JavaScript- How to change “message” div to yellow

    How can add atribute to css of page on page load event

    How to add a color in the
    bottom content area?

    How do I change the image inside an HTML5 form-validation message?

    How to set CSS3 transition using javascript?

    jqueryui dialog with table — how to limit row height

    How to hide div on swipe in Angular

    How to change the colors of a website in real time?

    How can I be sure that a website is responsive by only looking the code?

    Image title both alingn. How to make each element aligned vertically?

    How to extend a CSS/HTML content box to the bottom of browser/viewport window when other elements above it push it down?

    how to center text and control user zoom in CSS

    Inner div has borders - how to override with a class on an outer div?

    How do I resize a div relative to browser window size?

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    CSS. How to add small image on background?

    How to put an image in div with CSS?

    Wordpress how to tell my css version

    selenium - how to click on a link based on its text using css instead of xpath and without using the contains operator?

    Css Trick - How to align this div

    Not sure how to use css selectors

    How to fix the top row and first column in a webpage, with only CSS

    How to prevent crawlers depending on XPath from getting pages contents [duplicate]

    How to turn on Visual Studio 2010 .css Intellisense on .less file

    show two texts for one mouseOver event

    How to get a CSS selector using Selenium WebDriver?