We Love Icon Fonts

This is a free & open source icon fonts hosting service (like Google Web Fonts, but icon fonts only). Hurray!

WLIF needs your ideas!

If you want to create version 2.0 of We Love Icon Fonts with me I would be very happy if you share your ideas.

Before you start...

This is a public beta and I will add more fonts/features in the next days/weeks/months/years.

What do you think?

Drop a message on my blog or an issue on GitHub.

Brandico

Crowdsourced collection of web brands by fontello.

entypo

A set of 250+ carefully crafted pictograms by Daniel Bruce.

Font Awesome

The iconic font designed for use with Twitter Bootstrap by Dave Gandy.

Fontelico

A bunch of emoticons, loading- and browser-icons are in this awesome collection by fontello.

Maki

It's a clean point of interest icon set made for web cartography by MapBox.

OpenWeb Icons

Be proud of using Open Web Standards and show it to the world... by Matthias Pfefferle.

Typicons

Just some nice icons by Stephen Hutchings.

zocial

A huge collection of zocial & brand icons by Sam Collins.

Use selected fonts

Pro tip: Select some icon fonts to the see real output here!

How does this work?

I show you in 3 simple steps how to add an icon font (e.g. zocial) to your website!

1. Add the icon font(s) to your collection:

2. Import the icon fonts(s) into your css and add the font-family('s):

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

3. Burn baby, burn!

<!-- Single Element -->
<span class="zocial-dribbble"></span>
        
<!-- 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>

Pro Tip: Use the element inspector of your favorite browser and discover the icons on this page for more examples!