Dec 27 2012

We Love Icon Fonts: Open Source Directory for Free Icon Fonts

Advertisement

Tim Pietrusky, developer from Germany, has a big idea. His brand-new, free-of-charge web service called We Love Icon Fonts is supposed to become the equivalent to Google Web Fonts, but with a sole focus on icon fonts. The collection is steadily growing, quite a few are already integrated. If you want to embed the sets into your website, they get called in from the service as a third party hoster.

We Love Icon Fonts: Many Font Sets, One Location

Brandicon, Entypo, Font Awesome, Fontelico, Maki, OpenWeb Icons, Typicons and Zocial – there are quite a few names in that collection. Each set is presented in a visually appealing way, the name of each symbol is displayed on hover.

To use a set on one’s own website, you’ll want to click the beast of a button that’s named To Collection. If you feel like it, you could decide to choose all available sets and add them to your collection. There are no limitations to keep you from hurting yurself…

The following example represents my choice of Typicons and Zocial, the embed code got delivered by the service:

1
2
3
4
5
6
7
8
9
10
11
@import url(http://weloveiconfonts.com/api/?family=typicons|zocial);
 
/* typicons */
[class*="typicons-"]:before {
  font-family: 'Typicons', sans-serif;
}
 
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

Once embedded in the shown way, you can easily use the symbols in your own layout as usual. Like so:

1
2
<!-- Single Element -->
<span class="zocial-dribbble"></span>

Or so:

1
2
3
4
5
6
7
8
9
<!-- Group of Elements -->
<ul>
  <li class="zocial-twitter"></li>
  <li class="zocial-appstore"></li>
  <li class="zocial-flickr"></li>
  <li class="zocial-lastfm"></li>
  <li class="zocial-meetup"></li>
  <li class="zocial-reddit"></li>
</ul>

Using CSS you can further customize the looks. So far, so good.

What We Love Icon Fonts does not provide is the possibility of putting together a customized font set out of different icon fonts. If you need a symbol from – let’s say – Zodiac, you will have to embed the whole font set.

Services such as IcoMoon and Fontello deliver more. They also incorporate a wide variety of free icon fonts, but allow the customization in a way that the set only contains the chosen symbols which makes for a smaller download. Integration is achieved via @font-face.

At first sight We Love Icon Fonts may seem superfluos, redundant to say the least. Of course there are use cases where you may alter the source code while not having full FTP access to a website. In these cases, the service might prove helpful. Anyway, as Pietrusky promises to integrate more features quickly, keeping an eye on We Love Icon Fonts makes sense. Probably we will see a solution with more customization options, a hosted Fontello for example, soon. Then imagine that with a lot more icon fonts…

Related Links:

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Hirvesh, 27 December 2012

    Fantastic tools coming out for icon fonts and web fonts in general. I love IcoMoon’s web font composition tool, and now we’ve got an iconic font hosting service.

    If you’re looking for The Most Comprehensive Index Of Free Iconic Web Fonts, check out: http://www.functionn.in/2012/11/the-best-free-iconic-web-fonts.html

    Cheers for the post! :)

  • typo | Annotary, 18 January 2013

    [...] For Branding Your Twitter Account | DesignWoop Sort Share http://www.noupe.com       3 weeks [...]

  • Matt Fraser, 06 March 2013

    Superb Website, Keep up the excellent job. Appreciate it.

  • Matt Fraser, 21 March 2013

    Thanks with regard to giving many of these awesome data.

search form
 
image description image description