Markup-free icon fonts using unicode-range

I used icon fonts extensively while designing fripfrap.io. Unfortunately, icon fonts require tags wrapped around where they should be placed, and I went on a quest to find out if we can adaptively render icon fonts without any extra markup.

ICON FONTS

Icon fonts are easy clean way to render icons across all sizes of text. The other advantage is you can apply all the text controls that are available including text-shadow, vertical-align, font-size to tweak the output as you like, instead of fiddling around in SVG or with image sprites (here are more details on why icon fonts are better). The typical usage of icon fonts as pioneered by @simurai is:

[data-icon]::before {
    content: attr(data-icon);
}

Then, when you generate custom icon fonts using services like icomoon, you can specify a character that will be used to represent that icon and use that as the value of the icon in the mark-up. For example, to render the twitter icon, I select the Twitter icon from one of the various free icons available on icomoon, and then set the character to be ‘t’ in the app, and download the font:

In your markup, you declare:

<b data-icon=t>subscribe on twitter</b>