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!
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.
- Copy the Font Awesome font directory into your project.
- Copy font-awesome.min.css into your project.
- 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.)
- 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.Written by Allyson Beckers
Related protips
2 Responses
nice article!!
over 1 year ago
·
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Bootstrap
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#