Call
608.845.2900
Visit
330 Locust Dr.
Verona, WI 53593
Message
info@powderkegwebdesign.com
Powderkeg Web Design
Menu
Message Us
Nick
Nick

Utilizing Font Awesome in your Web Developement

July 22, 2014

There is a great icon font library out there called “Font Awesome”. It has a large list of icons (over 400 at the time of this posting), and they are all scalable to any size. We utilize this font all the time at Powderkeg, and I am going to show you how you can utilize it as well.

Quick Start

  1. The quickest way to get this working is to link to the Bootstrap Contend Delivery Network (CDN) link that houses the fonts. Simple open a new web document, and in header you will want to paste in the follow link:

    This allows you to reference the fonts from an external source. Ideally you will want to download the fonts and put them on your server yourself. (See more here)
  2. Now you just have to put the font icon on your page anywhere you want with this tag: <i class="fa fa-picture-o"></i>. It is the classes that determine what icon is displayed. This particular one is an icon of a picture:
    pj17ilawFor a complete list of all of the different icons you can choose, click here. You will be able to style it just like you would any other font. That means you can give it a font size and font color to match your theme.
  3. As an added bonus, you can also call a Font Awesome icon through pure css via unicode. To do you that, you will want to make use of the :after and :before pseudo classes that css offers. As an example, consider the following markup:

    This by itself won’t do anything other than create a link. However, if you add the following css:

    You end up with a link to your Facebook page with a nice, scalable icon to the left of it.

    ab-wz0yi

Font Awesome can be used in a wide variety of ways and is very versatile. I am yet to run in to a situation where I need an icon and there isn’t one readily available from there. Another bonus to using this font is that Web Designers can incorporate them in to Photoshop and Fireworks as well. The only things you have to do is install the fonts from the Font Awesome website and use the cheatsheet to copy and paste the icons right in to your designs. Voila! Perfect synergy between Design and Development.

Nick
Nick
Lead Developer

Nick is an ambitious and versatile developer with a wide range of talents. He is an efficient coder that utilizes his resources in order to achieve both his and the clients’ goals. His Alma Mater is the University of Wisconsin – Stevens Point where he graduated with honors in Web and Digital Media Development.