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:
Download Font Awesome package;
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;Include
<link rel="stylesheet" href="path/to/css/font-awesome.min.css">
in the<head>
of your HTML;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