Font Awesome vs Glyphicons in Twitter Bootstrap

twitter-bootstrap font-awesome glyphicons
user2471133 picture user2471133 · Jun 26, 2013 · Viewed 55.8k times · Source

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?

Answer

Ravimallya picture Ravimallya · Jun 26, 2013

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.

Related questions

Bootstrap 3 Placing Icon inside input field

I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box. My html looks like this: <div class="col-md-12"> <div class='right-inner-addon col-md-2 date datepicker' data-date-format="…

Read More
How do I center Glyphicons horizontally using Twitter Bootstrap

I am trying to center my FontAwesome icons inside my Twitter Bootstrap code. This is my HTML: <div id="frontpage-content" class="content"> <div class="container"> <div class="row"> <div class="col-lg-4"> <…

Read More
Bootstrap 3 without Glyphicons replaced with Font Awesome

I want to remove Bootstrap 3 Glyphicons in favor of Font Awesome. Since Font Awesome already includes most of the Glyphicons y don't want to include them and avoid duplicates and compatibility problems. when I make a customized bootstrap download and …

Read More