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: ``

• Share on LinkedIn

``