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.

e.g.
 

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 */
.ms-list-addnew-img20[src*="/_layouts/15/images/spcommon.png?rev=23"],
.ms-list-addnew-img16[src*="/_layouts/15/images/spcommon.png?rev=23"]
              {
               width:0; height:0;
               /*visibility:hidden;*/
              }

/* add new icon */
span.ms-list-addnew-imgSpan16:before,
span.ms-list-addnew-imgSpan20:before
/*.ms-list-addnew-img16[src*="/_layouts/15/images/spcommon.png?rev=23"]:before*/
             {
              /*icon framework*/
               content:"\f055";
               font-family:FontAwesome;
               /* custom icon size */
               font-size:20px;
             }

/* fix new icon position */
span.ms-list-addnew-imgSpan16,
span.ms-list-addnew-imgSpan20      {height:auto; width:auto;}

/* custom icon hover color */
span.ms-list-addnew-imgSpan16:hover,
span.ms-list-addnew-imgSpan20:hover     {color:red;}

No comments:

Post a Comment