Add all Glyphicons to Bootstrap 3 - twitter-bootstrap-3

Question

I'm diggin' the Glyphicons in Bootstrap 3, but it looks like they're not all there! I'd really like to use the building icon, but Googling hasn't turned up much of anything.
Does anyone know how to add the missing Glyphicons to Bootstrap 3?

Answer 1

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/

Answer 2

I wanted to use the Glyphicons Pro I'd bought but expanding the current halflings stuff inside bootstrap was messy. So I created a separate css file for each icon set (full, filetypes & social) and copied the way bootstrap initialises them so I could use similar syntax.
i.e.
<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>
This way you can load only the ones you want and when you want and you can use the vanilla bootstrap config. Find my files here: Gist#GitHub

Answer 3

I have purchased the full Gylphicons set from http://glyphicons.com/ and wanted to use all the icons available. If you are using less you may have to do something different I dont know.
What I have done and worked for me after trying various things posted from this thread and others on the stackexchange network is the following:
(1) Backed up my original bootstrap.css file (I have modified mine, plus good idea)
(2) Copied all the glyphicons-regular font files from /web/html_css/fonts directory to the fonts directory where my bootstrap font files are located
(3) Starting on line 263ish of bootstrap.css make the change to reflect like below: (yours might be slightly different)
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-regular.eot');
src: url('../fonts/glyphicons-regular.eot?#iefix')
format('embedded-opentype'), url('../fonts/glyphicons-regular.woff')
format('woff'), url('../fonts/glyphicons-regular.ttf')
format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
}
They url's should be pointed at the new font files.
(4) If you want all of the glyphs like I did then open up the file in the /web/html_css/css/ directory labeled glyphicons.css and copy all the css for the glyhicons except the part with #font-face{} and the .glyphicon{}
and paste into empty text document.
(5) You will need to do a search and replace (I did anyway) for .glyphicons, mind the (s) at the end and replace with .glyphicon no (s) on the end
(6) Next open up the bootstrap.css file and comment out or remove all the other .glyphicon-whatever styles and paste in your new styles.
(7) You may need to remove the line from the very bottom of the file which point to the bootstrap.css.map file. I didn't have to but you may need to.
(8) Happy Glyphing!
NOTE You should be setup to use all the glyhpicons now. Just keep in mind that some of the names of the glyphicons are different then in the original bootstrap file.
I created a repository for the modified css file: https://github.com/snowballrandom/bootstrap

Answer 4

It would be simpler to just create a custom .png and use css normally.