Font Awesome vs Glyphicons in Twitter Bootstrap

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?

57635 次浏览
小开

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.

小开

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.

小开

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.


提交答案