Font Awesome vs Glyphicons in Twitter Bootstrap

Question

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?

Solution 1

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

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/

Solution 3

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.

Comments

[Neo]

Glyphicons that come with bootstrap now use the font method as well! getbootstrap.com/components/#glyphicons

[trante]

How ? Does your link gives information for using glyphicons in a vectoral way.

[tommaso capelli]

New glyphicons for Twitter Bootstrap are already in vectorial format.

[jrhorn424]

+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 which support bootstrap.

[MushyPeas]

Update: Bootstrap 4 does not ship Glyphicons anymore.

[Andrei]

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.

[Monojit Sarkar]

what is advantage of using vector icons which comes with font awesome.what type of images used for glyphicons?

[Monojit Sarkar]

@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 <span class="glyphicon glyphicon-user" style="color:blue"></span> size also can be increase. here is write up stackoverflow.com/a/24960243/6188148

[Ravimallya]

@MonojitSarkar The glyph icons that I was referring in the Bootstrap version 2.x.x where you can't. See the update.