65bptw
Last Updated: February 25, 2016
·
22.73K
· allysonbeckers
Avatar

Replace Glyphicons (sprites.less) with Font Awesome

Font Awesome is a free iconic font designed for use with Twitter Bootstrap in order to replace the Glyphicons sprite. It even comes with extra icons that you won't get with Twitter Bootstrap!

Picture
Picture

Some advantages of using an icon font over an image sprite are:

  • CSS Control Easily style icon color, size, shadow, and anything that's possible with CSS.
  • Infinite Scalability Scalable vector graphics means every icon looks awesome at any size.
  • Perfect on Retina Displays Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Some extra perks:

  • One font, 249 icons In a single collection, Font Awesome is a pictographic language of web-related actions.
  • IE7 Support Font Awesome supports IE7. If you need it, you have my condolences.
  • Designer Friendly Install FontAwesome.otf and visit the copy & paste page. Happy designing.
  • Screen reader compatible Font Awesome won't trip up screen readers, unlike other icon fonts.

Integration

It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.

Use this method to integrate Font Awesome with the default Bootstrap CSS.

  1. Copy the Font Awesome font directory into your project.
  2. Copy font-awesome.min.css into your project.
  3. Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place. (The font path is relative from your CSS directory.)
  4. In the <head> of your html, reference the location to your font-awesome.min.css. <small>Without the #s</small>

<#link rel="stylesheet" href="../css/bootstrap.min.css" />
<#link rel="stylesheet" href="../css/font-awesome.min.css" /></code></pre>

LESS, SASS, and other integration examples can be found on the Font Awesome Github Page.



Examples

Use Font Awesome icons in:


Bulleted lists
Buttons
Button groups
Navigation
Prepended form inputs
And many more with Custom CSS


Larger Icons

To increase the size of icons relative to its container, use icon-large (33% increase), icon-2x, icon-3x, or icon-4x.



<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>


Bordered & Pulled Icons

Use icon-border and pull-right or pull-left for easy pull quotes or article graphics.



<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together ... lots of new possibilities.




<i class="icon-flag icon-4x pull-left icon-border"></i>
Use a few of the new styles together ... lots of new possibilities.


More HTML examples can be found on the Font Awesome Github Page.
Say Thanks
Respond

2 Responses
Add your response

11761
Default profile 4 normal

nice article!!

over 1 year ago ·
16731
538c0cae209b0cce8f528b9a91ba7c1a

Good article!
In addition to Font Awesome there is Bootsrap Stroke https://github.com/HighRobotics/Bootstrap-Stroke/, and I saw some others.

over 1 year ago ·