Iconfonts how to

Step 1: Put the following in the your main css.

[data-icon]:before {
	font-family: 'iconset'; 
  	content: attr(data-icon);
  	speak: none; 
  	font-style: normal;
  	font-weight: normal;
  	-webkit-font-smoothing: antialiased;
}

Alternately you can just include the common.css which includes the data-icon declaration. Link is here: https://raw.github.com/commons/common.css/master/build/common.css

Step 2: Put the following snippet in the main css.

    @font-face {
        font-family: @fontname;
        src: url('@{fontpath}/@{fontname}/webfont.eot');
        src: url('@{fontpath}/@{fontname}/webfont.eot?#iefix') format('embedded-opentype'),
             url('@{fontpath}/@{fontname}/webfont.woff') format('woff'),
             url('@{fontpath}/@{fontname}/webfont.ttf') format('truetype'),
             url('@{fontpath}/@{fontname}/webfont.svg#@{fontname}') format('svg');
        font-weight: normal;
        font-style: normal;
    }

Alternately you can include font-face less here: https://raw.github.com/commons/less/master/mixins/font-face.less and call your font face in your main css with the following syntax

.font-face('iconset', 'fonts');

HTML code example:

<ul class="social">
    <li><a href="" rel="linkedin"><i aria-hidden="true" data-icon="&#x24;"></i><span> Share on LinkedIn</span></a></li>
</ul>

Following is a list of suggested keycodes for common icons

Linked In = $

Twitter = #

Facebook = !

Google Plus = +

Github = ?

Star = *

HTML5 = %

CSS3 = ^

Home = ~

Location = .

New Window = >

Email = @

Heart = <

Chat = "