Thursday, January 29, 2015

Using FontAwesome as an icon framework

When customizing the look and feel of a website, we often want to use specific, intuitive icons.
In some cases - such as content management platforms - these icons are already there, but they may not make sense for many reasons:
  • not completely meaningful
  • color does not match the site design
  • not flexible enough

Wouldn't it be great is there was a lightweight solution we could use, that doesn't involve any script, of even custom images?!

Well, there is. I have been using FontAwesome for a while now and I can say it is pretty impressive:
  • 100% CSS (no images, or scripts)
  • Supports IE8+ and other browsers
  • Its an icon framework with 500+ icons
  • Provides a consistent icon set
  • Supports features such as custom size, mouse over color, animated icons, rotation, etc.
  • Its free!
Now, the idea is that you embed, in your html, a tag with your markup.


Here's a breakdown:
  • fa provides common icon styles
  • fa-camera-retro specifies the icon to be used
  • fa-3x enables to increase the original size 3 times

In this post,  I have confirmed that we can use this framework even without adding custom html, as long as we add a reference to font-awesome.min.css and include the font files.

div.github:before {
 content: "\f09b";
 font-family: FontAwesome;

 /* more styling for the icon, including color, font-size, positioning, etc. */

Using this other idea, considering the markup of a SharePoint site is already there, we can remove the existing icon, and add another one, not an image, but from FontAwesome.

/* disable default icon */
               width:0; height:0;

/* add new icon */,
              /*icon framework*/
               /* custom icon size */

/* fix new icon position */,      {height:auto; width:auto;}

/* custom icon hover color */,     {color:red;}

No comments:

Post a Comment