How to Use Icon Font?

Written by Saran on February 15, 2013, Updated February 16, 2013

Icon fonts can be embedded simply using CSS @font-face like any other fonts, but there are few simple rules to follow for cross-platform compatibility. Let us look at the usage of @font-face rule and data-icon attribute to display icons stored in a Font file. Font Icons are versatile compared to regular image files, text shadows, colors can be applied to it and scale it up as much as we want, without making it blurry like an regular image icon. We just need to drop @font-face within our CSS to get started.

@font-face

First we include @font-face rule on top of CSS file, it tells browser where to find our web safe Icon font file to render a webpage, make sure we have included all the font formats for cross browser compatibility here. [cc lang="css"] @font-face { font-family: 'saaraan'; src:url('saaraan-icons.eot'); src:url('saaraan-icons.eot?#iefix') format('embedded-opentype'), url('saaraan-icons.woff') format('woff'), url('saaraan-icons.ttf') format('truetype'), url('saaraan-icons.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } [/cc] That should be it, We can now simply assign our font to any class and render our icons regular way. But wait! there are some concerns about the screen readers! You wouldn't want these applications to read-out your HTML characters such as these :, so we take alternative approach here by using aria-hidden and data-icon attribute, you might want to checkout Chris Coyier explaining about the issue in depth here.Here's our CSS code: [cc lang="css"] @font-face { font-family: 'saaraan'; src:url('saaraan-icons.eot'); src:url('saaraan-icons.eot?#iefix') format('embedded-opentype'), url('saaraan-icons.woff') format('woff'), url('saaraan-icons.ttf') format('truetype'), url('saaraan-icons.svg#webfont') format('svg'); font-weight: normal; font-style: normal; }[data-icon]:before { font-family: saaraan; content: attr(data-icon); speak: none; font-weight:normal; } [/cc]

HML data-icon

Mark-up is pretty straight forward, we use aria-hidden and enter value of icons we want to display in data-icon="" attribute. data-icon is a alternative approach that uses the HTML5 data- attribute, it lets us add our own metadata to elements, as long as prefixed by data- with no uppercase letters.Here's our HTML: [cc lang="html"] [/cc]