Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add all Glyphicons to Bootstrap 3

Tags:

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?

like image 963
lowe0292 Avatar asked Dec 03 '13 06:12

lowe0292


People also ask

How do I add Glyphicons in bootstrap 3?

Bootstrap 3 Glyphicons are actually fonts, so you can scale them and color them as you please. Bootstrap previously used image sprites for icons. To add a glyphicon, add a <span> tag with Bootstrap's . glyphicon class and also the class for the specific glyphicon that you require.

How do I get bootstrap Glyphicons?

Glyphicons. Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.


2 Answers

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/

like image 128
Mike Causer Avatar answered Oct 01 '22 20:10

Mike Causer


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

like image 42
Jelby-John Avatar answered Oct 03 '22 20:10

Jelby-John