Font Awesome vs Glyphicons in Twitter Bootstrap

Twitter BootstrapFont AwesomeGlyphicons

Twitter Bootstrap Problem Overview


I am a beginner in web development and I recently started working with Twitter Bootstrap, I know it uses Glyphicons which I already know how to use. But I also came across Font Awesome which says that it is built for Bootstrap.

What are the differences between the two? I mean is one an alternative for the other? Or should you use them in different places?

Twitter Bootstrap Solutions


Solution 1 - Twitter Bootstrap

In Bootstrap 2.x.x Glyphyicons were in image format, hence you can't increase the size, change the color, background-color, etc easily. However, font-awesome gives you scalable vector icons that can instantly be customized — size, color, drop-shadow, and anything that can be done with the power of CSS.

Font-awesome is really an alternative for Glyphyicons which is getting updated time-to-time with new icons. Fat and Mdo are planning to integrate Font-awesome in bootstrap version 3 as a replacement for Glyphyicons.

My suggestion is you use bootstrap with font-awesome. First include bootstrap css and then Font-awesome css, so that the Glyphyicons will be override by font-awesome.

UPDATE

In bootstrap version 3.x.x glyphicons become font format, which will render nicely even in 12px font-size. If you're using the latest version of fontawesome, i.e. 4.01, you can use both glyphicons with fontawesome.

Solution 2 - Twitter Bootstrap

Font Awesome:

  • Over 150 more icons
  • Pixel perfect at default bootstrap font (14px)
  • Icons do not have the same size and require custom css for each to align
  • Has bulleted list, rotation (can be added with css3), stacked icons, and spinner animation (can be added manually ) Glyphyicons:
  • Less Icons
  • Pixel Perfect at larger font size (16px)
  • Same size icons

see: http://tagliala.github.io/vectoriconsroundup/

A side-by-side comparison between popular icon fonts made for Bootstrap.

Solution 3 - Twitter Bootstrap

Font awesome is a collection of vector icons which are obtained by using a specific font and some css to make the "magic", Glyphicons uses the sprite-css technique.
You can use them both, just add the css file after Bootstrap's one.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>

If you don't want to have glyphicons but just the font-awesome one you should go here and customize your Bootstrap download to get it without glyphicons.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2471133View Question on Stackoverflow
Solution 1 - Twitter BootstrapRavimallyaView Answer on Stackoverflow
Solution 2 - Twitter BootstrapNeoView Answer on Stackoverflow
Solution 3 - Twitter Bootstraptommaso capelliView Answer on Stackoverflow