83

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?

user2471133
  • 1,377
  • 3
  • 14
  • 15

3 Answers3

66

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.

Ravimallya
  • 6,550
  • 2
  • 41
  • 75
  • 19
    +1, but integration with Font Awesome was not implemented in Bootstrap 3. FA is not officially affiliated with twitter, other than supporting Bootstrap 2 out of the box. Here's a [comparison of different font icon packs](http://tagliala.github.io/vectoriconsroundup/) which support bootstrap. – jrhorn424 Oct 22 '13 at 13:42
  • 3
    Update: Bootstrap 4 does not ship Glyphicons anymore. – MushyPeas Dec 21 '16 at 13:27
  • FontAwesome states, it is 100% free, even for commercial use. Glyphicons have some limitations: "Glyphicons Halflings are normally not available for free". I don't know about "google material fonts", but for some products (js charts module) you cannot host it yourself, and can only link it from their CDN. – Andrei Feb 15 '17 at 13:04
  • what is advantage of using vector icons which comes with font awesome.what type of images used for glyphicons? – Monojit Sarkar Feb 07 '18 at 16:47
  • @Ravimallya you said glyph icon size and color can not be change. i do not know for what context you said this. i found size and color can be change. here is a example-----> changing glyph icon color -> few samples size also can be increase. here is write up https://stackoverflow.com/a/24960243/6188148 – Monojit Sarkar Feb 07 '18 at 17:14
  • @MonojitSarkar The glyph icons that I was referring in the Bootstrap version 2.x.x where you can't. See the update. – Ravimallya Feb 08 '18 at 06:14
28

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.

Neo
  • 11,078
  • 2
  • 68
  • 79
12

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.

tommaso capelli
  • 920
  • 2
  • 8
  • 20