how to include glyphicons in bootstrap 3

Question

I've not used any of the bootstrap frameworks before. I want to include some of the glyphicons in bootstrap 3 on my page. From what I understand they should be included in a bootstrap.css file which I've added to my page. When I've looked in the bootstrap.css file however I don't see any reference to them ? Although its a large file I may have missed something.

I have noticed that when I opened the dist folder downloaded from bootstrap 3 there is a separate folder fonts that contains files named:

glyphicons-halflings-regular.eot 
glyphicons-halflings-regular.svg 
glyphicons-halflings-regular.ttf 
glyphicons-halflings-regular.woff

It Seems like this is where the glyphicons are however I don't know how to attach these to my site? How do I attach the glyphicons to my page ?

Thanks for any help in advance

The code below shows the attached bootstrap.css file:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap example</title>
    <meta name="viewport" content="width=divice-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet" media="screen">
 </head>

and here is the part of the html code showing where the glyphicons should be:

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>
           Home</a></li>    
          <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top
           Destinations</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span    
            class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>

Seeing where to save the font files (http://getbootstrap.com/getting-started/#whats-included-precompiled) and reading about the order of imports (https://github.com/twbs/bootstrap-sass#fonts) helped me. — Ryan, May 25 '17 at 01:09

score 100 · Accepted Answer · edited Sep 06 '17 at 15:47

I think your particular problem isn't how to use Glyphicons but understanding how Bootstrap files work together.

Bootstrap requires a specific file structure to work. I see from your code you have this:

<link href="bootstrap.css" rel="stylesheet" media="screen">

Your Bootstrap.css is being loaded from the same location as your page, this would create a problem if you didn't adjust your file structure.

But first, let me recommend you setup your folder structure like so:

/css      <-- Bootstrap.css here
/fonts    <-- Bootstrap fonts here
/img
/js       <-- Bootstrap JavaScript here
index.html

If you notice, this is also how Bootstrap structures its files in its download ZIP.

You then include your Bootstrap file like so:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="./css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">

Depending on your server structure or what you're going for.

The first and second are relative to your file's current directory. The second one is just more explicit by saying "here" (./) first then css folder (/css).

The third is good if you're running a web server, and you can just use relative to root notation as the leading "/" will be always start at the root folder.

So, why do this?

Bootstrap.css has this specific line for Glyphfonts:

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

What you can see is that that Glyphfonts are loaded by going up one directory ../ and then looking for a folder called /fonts and THEN loading the font file.

The URL address is relative to the location of the CSS file. So, if your CSS file is at the same location like this:

/fonts
Bootstrap.css
index.html

The CSS file is going one level deeper than looking for a /fonts folder.

So, let's say the actual location of these files are:

C:\www\fonts
C:\www\Boostrap.css
C:\www\index.html

The CSS file would technically be looking for a folder at:

C:\fonts

but your folder is actually in:

C:\www\fonts

So see if that helps. You don't have to do anything 'special' to load Bootstrap Glyphicons, except make sure your folder structure is set up appropriately.

When you get that fixed, your HTML should simply be:

<span class="glyphicon glyphicon-comment"></span>

Note, you need both classes. The first class glyphicon sets up the basic styles while glyphicon-comment sets the specific image.

I would just add one more thing. If you have the proper file structure, and bootstrap is still not be able to locate the font files, AND you are using a framework like Spring MVC that requires request mapping for static files, be sure to update those mappings as well. Hope that can save someone else 20 minutes... — Mac, Jun 22 '16 at 01:07

how to include glyphicons in bootstrap 3

1 Answers1

Linked