How to include Glyphicons without using Bootstrap CSS

I was trying to get Bootstrap's glyphicons to work without installing the whole bootstrap.css file, but half way through it became too much work and I gave up. Instead, I came across Font Awesome. Bootstrap 3 itself uses it (or used to use). It is designed to be used as a standalone so it's really simple and light. All you have to do is:

  1. Download Font Awesome package;

  2. Copy font-awesome.min.css into your css folder and all of the fonts files from Font Awesome's fonts folder into your fonts folder;

  3. Include <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> in the <head>of your HTML;

  4. Choose icons from the icon library and put them into your app just as you would Bootstrap's glyphicons.


There's this:

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

However, if you want to conserve some bandwidth, you can load the fonts directly from a CDN and then inline the required CSS, like this:

<style>
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Add icons you will be using below */
.glyphicon-fire:before {
  content: '\e104';
}
.glyphicon-eye-open:before {
  content: '\e105';
}
</style>

You can see an example in the demo here ("Eye of Medusa" and "Rain of Fire" menu items).


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

Tags:

Html

Css

Twitter Bootstrap

Twitter Bootstrap 3

Glyphicons

Recent Posts