Fontello – Icon Font Generator

Why is it so hard to find a set of icons that covers all the bases with a consistent look and feel? One of life’s great mysteries perhaps. Well, wonder no more because Fontello not only has all the icons you need but you can pick and choose the glyphs you need and compile these into your own minimalist set.

 You can, of course, download the entire set of icons from theGitHub repository (actually it’s several sets) but thefontello.com interface makes customising your font so easy it’s the only sensible approach. The project is open source but as always, donations would be appreciated.

  • Scalability

The primary benefit of this font approach is scalability. If you are building a responsive website that must cater to multiple devices and screen sizes — including instances where your site is viewed on high resolution “Retina” displays — having vector-based fonts allows for crispness at any display size.

  • Ease of Use

How does it work? Install the provided font (provided in various formats) and the provided css stylesheet file(s) to your server. Add the css stylesheet to your html:

<link rel="stylesheet" href="/../css/font-awesome.min.css">

And then within your html markup just add the class of the icon that you want to use:

<a href="#"><i class="icon-repeat"></i> icon-camera-retro</a>

  • Twitter Bootstrap Compatibility

And for users of Twitter’s Bootstrap front-end framework, these icons can be easily added. For example, to modify the Font Awesome icon mentioned above to a Twitter Bootstrap button, just add Bootstrap’s “btn” class to the link markup:

<a href="#" class="btn"><i class="icon-repeat"></i> icon-camera-retro</a>

Source : fontello

Love this post?