How to Include Glyphicons in Bootstrap 3

how to include glyphicons in bootstrap 3

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.

How to include Glyphicons without using Bootstrap CSS

Here is a bower package that you can use only glyphicons out of entire bootstrap.

Check this github repository https://github.com/ohpyupi/glyphicons-only-bootstrap

or

bower install glyphicons-only-bootstrap

EDIT

Now it's possible to download the package through NPM.

npm install glyphicons-only-bootstrap

Add Glyphicon to Every Button (bootstrap 3.5)

I thing you might wants above image Output for your all the buttons.

For that you need to just write simple css :after class css to apply on all default buttons after text:

.btn-default:after {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    vertical-align: middle;
    padding: 6px 5px;
    color: #0099FF;
}

this will work for your all buttons as shown in image.

Add all Glyphicons to Bootstrap 3

You can build your own custom font using the free service: http://fontello.com/

Simply drag your glyphicons-halflings-regular.svg file in, choose the icons you want to use and download a custom font containing only that which you need.

Fontello comes preloaded with the following libraries:

• Fontelico
• Font Awesome
• Entypo
• Typicons
• Iconic
• Modern Pictograms
• Meteocons
• MFG Labs
• Maki
• Zocial
• Brandico
• Elusive
• Linecons
• Web Symbols

You can also buy the full version of Glyphicons for $59 at http://glyphicons.com/

Bootstrap 3 Glyphicons CDN

With the recent release of bootstrap 3, and the glyphicons being merged back to the main Bootstrap repo, Bootstrap CDN is now serving the complete Bootstrap 3.0 css including Glyphicons. The Bootstrap css reference is all you need to include: Glyphicons and its dependencies are on relative paths on the CDN site and are referenced in bootstrap.min.css.

In html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

In css:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Here is a working demo.

Note that you have to use .glyphicon classes instead of .icon:

Example:

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

Also note that you would still need to include bootstrap.min.js for usage of Bootstrap JavaScript components, see Bootstrap CDN for url.

---

If you want to use the Glyphicons separately, you can do that by directly referencing the Glyphicons css on Bootstrap CDN.

In html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

In css:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

Since the css file already includes all the needed Glyphicons dependencies (which are in a relative path on the Bootstrap CDN site), adding the css file is all there is to do to start using Glyphicons.

Here is a working demo of the Glyphicons without Bootstrap.

How to achieve Glyphicons with numeric subscripts inside Bootstrap 3?

You mean something like this?

This is just some CSS basic styling, there is afaik no "standard" and certainly no special HTML tags nor "secret" bootstrap features that supports it. Below my suggestion - modify so it fit your expectations :

.rw-number-notification {
    position: absolute;
    top: -7px;
    right: -6px;
    padding: 3px 3px 2px 3px;
    background-color: red;
    color: white;
    font-family: arial;
    font-weight: bold;
    font-size: 10px;
    border-radius: 4px;
    box-shadow: 1px 1px 1px silver;
}

markup :

<span class="glyphicon glyphicon-envelope">
  <span class="rw-number-notification">7</span>
</span>

demo with some examples -> http://jsfiddle.net/rqfthhkx/

NB: Not completely related, but I do believe, though, that it is common practice to use the <i> tag when you are using glyphicons, fontawesome etc

<i class="glyphicon glyphicon-envelope"></i>

at least it renders as exactly the same -> http://jsfiddle.net/rqfthhkx/1/

---

Font Awesome

Example:

<i class="fa fa-envelope text-primary">
  <span class="number-notification">7</span>
</i>

The .number-notification CSS is the same, except it seems impossible to adjust the position of the number container to fa-xx sizes and different font-sizes. The solution is to wrap the <i> element into <h> elements and specify the relative position in rem units :

.number-notification {
  position: relative;
  padding: 3px 3px 2px 3px;
  background-color:red;
  color:white;
  font-family: arial;
  font-weight:bold;
  font-size: 10px;
  border-radius: 4px;
  box-shadow:1px 1px 1px silver;
}
.fa .number-notification {
  top: -1rem;
  right: 1rem;
}
h3 .fa .number-notification {
  top: -1.2rem;
  right: 1.2rem;
}
h2 .fa .number-notification {
  top: -1.5rem;
  right: 1.5rem;
}
h1 .fa .number-notification {
  top: -2.2rem;
  right: 1.8rem;
}

This should look more or less the same with different font sizes.

New fiddle -> http://jsfiddle.net/b86oj9gd/

Bootstrap 3 glyphicons in add ons

Yes, it seems a bug for my: It's a bug: https://github.com/twbs/bootstrap/issues/10936

I read this https://github.com/twbs/bootstrap/issues/9850 first.

I use this code to this:

<div class="container"> 
<br>
<div class="input-group">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
  <input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-sm">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
  <input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Username">   
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>    
</div>
<br>
</div>

Results for Firefox:

:

There will be a problem for input-group-lg the double span makes the input longer (due to .glyphicon:empty) but didn't fix the problem.
I also not found .glyphicon{ ...; top: 1px; ...} caused this problem.

For firefox i found this solution:

from bootstrap.css:

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 45px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Changing the vertical padding from 10px to 9px solved the issue.

This css rules comes from forms.less (.input-lg() call from inputgroups.less)
using @padding-large-vertical: 10px; (from variables.less)

In google chrome i found a same kind of problem, for all sizes see:

In this case it helps to use the double span:

`<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>` 

Can I Get Bootstrap Glyphicons from a CDN?

If you include the stylesheet bootstrap.min.css in your HTML file like this (for example):

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

Then the Glyphicons font(s) will automatically be downloaded from the same location:

//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2

This is because the fonts are loaded using relative URLs. When the CSS in bootstrap.min.css is parsed, the URL from which it was downloaded is used as the base, not your website's URL.

With regards to precompiled Bootstrap: This is useful if you want to host the files on your own web server (for some reason). They are made available as a zip file containing the correct directory structure required for the above behaviour to function correctly out of the box. It's labelled as precompiled, because you could alternatively download the source files. Although CSS and JavaScript files are considered source files in their own right, Bootstrap uses a precompiler on its CSS to make it easier for them to write the large files. They also use several smaller JavaScript files which are merged together for release by a build script. You can see this in action at their GitHub repository.

---

Related Topics