Easy Web Icons with Font Awesome
Michael always says “K-I-S-S. Keep it simple, stupid.” Great advice. Hurts my feelings every time.
– Dwight
There is some truth to what Michael says. Whenever possible it is always better to “Keep it simple, stupid”. Recently, while working on a little web utility I came upon the usual task of adding graphical action icons to a web application. Typically this is where we search Google for the shiniest new PNGs to fit out needs. But I happened to stumble across Font Awesome, which is a pictographic font made up of scalable vector graphics. Its pure CSS, no javascript needed, and 369 icons included. The only major limitation I could find was that it requires IE8 or greater.
Font Awesome can be implemented by adding the CSS file to your project, or even easier just reference the CSS from the Bootstrap CDN. Loading it from the CDN is the simplest manner, no files to maintain and your clients will pull it directly from the CDN. After you add the CSS reference you can start using it by just creating
<i class="fa fa-gears fa-3x"></i>
tags, and specify the class of the icon you want.
Below is an example in an ASP.NET MVC 5 Layout. Its a great little library to make your life easier. Check out their Getting Started guide today.
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ViewBag.Title - Admin
@Styles.Render("~/Content/css")
@Styles.Render("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css")
@Scripts.Render("~/bundles/modernizr")</pre>
<div class="container body-content">
@RenderBody()
<i class="fa fa-gears fa-3x"></i>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
<li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
</ul>
</div>
<pre>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required:=False)
