Webdesign

We Love Icon Fonts: Open Source Directory für Icon Fonts

27. Dezember 2012
von

Der deutsche Entwickler Tim Pietrusky tritt mit einem gehobenen Anspruch an. Sein kostenloser Icon Font Hosting Service mit dem schönen Namen “We Love Icon Fonts” soll so etwas werden wie die Google Web Fonts, nur eben mit dem Fokus auf freie Icon Fonts. Etliche davon hat er bereits gesammelt, die Einbindung erfolgt zentral über den Dienst.

We Love Icon Fonts: Viele Fontsets an einem Ort

Brandicon, Entypo, Font Awesome, Fontelico, Maki, OpenWeb Icons, Typicons und Zocial – das bisherige Aufgebot an freien Icon Fonts liest sich bereits ganz gut. Jedes der genannten Fontsets wird in grafischer anspruchsvoller Weise detailliert dargestellt, die Bezeichnungen der einzelnen Symbole erscheinen on mouse-hover.

Will man ein Fontset zur Nutzung auf der eigenen Website auswählen, klickt man unterhalb der Darstellung der einzelnen Symbole den unübersehbaren Button “To Collection”. Wenn man möchte, fügt man alle im Angebot befindlichen Icon Fonts der Auswahl hinzu. Begrenzungen diesbezüglich gibt es nicht.

Im folgenden Beispiel habe ich die Typicons und Zocial ausgewählt, der Dienst liefert mir folgenden Embed-Code:

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;
}

Sind die Sets in dieser Weise eingebunden, können sie in gewohnter Weise innerhalb des eigenen Layouts verwendet werden. Beispielsweise so:

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

Oder 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>

Die Darstellung im Übrigen passt man via CSS den eigenen Vorstellungen an. So weit, so gut.

Nicht möglich indes ist die Zusammenstellung eines Icon Fonts, der nur bestimmte Symbole aus unterschiedlichen Fontsets enthält. Will man also ein Symbol etwa aus Zocial verwenden, so wird das gesamte Set eingebunden, bei mehreren Fontsets eben mehrere.

Da sind Anbieter wie IcoMoon und Fontello weiter. Auch diese bieten eine breite Palette unterschiedlicher freier Fontsets (IcoMoon teilweise kostenpflichtig), erlauben aber die Zusammenstellung eines individuellen Sets, das dementsprechend kleiner ausfällt und mit allen erforderlichen Dateien zur Einbindung via @font-face ausgeliefert wird.

We Love Icon Fonts erscheint daher auf den ersten Blick überflüssig. Lediglich da, wo man zwar Zugriff auf den Quelltext, nicht aber auf die Dateistruktur hat, kann das Hosting via We Love Icon Fonts sinnvoll sein. Nachdem Pietrusky jedoch verspricht, das Featureset schnell zu erhöhen, sollte man den Dienst durchaus im Auge behalten. Eine Hostinglösung mit individuellen Fontsets könnte schon wieder interessanter sein. Und wenn dann noch massenhaft Icon Fonts dazu kämen…

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: ,

4 Kommentare zu „We Love Icon Fonts: Open Source Directory für Icon Fonts
  1. Tim Pietrusky am 27. Dezember 2012 um 17:50

    Hey und danke für den tollen Beitrag.

    In erster Linie ist weloveiconfonts.com dazu gedacht, auf schnelle Art & Weise Icon Fonts zu nutzen. Und das z. B. in Demos auf CodePen/jsFiddle oder in Projekten, in denen man verschiedene Icon Fonts testen möchte, ohne sie lokal vorläufig zu haben. Im späteren Livebetrieb sollten die Fonts daher am besten auf dem eigenen System gehostet werden.

    In der Zukunft werde ich den Dienst um individuell erstellbare Icon Fonts erweitern, die dann auch direkt gehostet werden. Und was auch immer der Community noch so einfällt.

    • Martin Fieber am 27. Dezember 2012 um 21:23

      Die Sets selbst zusammenstellen ist eine super Sache. Andere Anbieter von Bildschriftarten haben bereits die Möglichkeit, was ich auch in produktiven System sehr gern nutze. Inwieweit sich da allerdings dieser Dienst durchsetzen kann wird sich zeigen. Immerhin gibt es bereits einige Anlaufstellen mit teilweiße doch sehr ansprechenden Bedienungen.

  2. ati am 28. Dezember 2012 um 17:15

    Der Artikel hat mich dazu animiert, mein wichtigstes Projekt umzustellen. Danke! Klasse, welche Möglichkeiten man heute hat, wenn man auf die Schrott-Browser (IE6 & Co.) keine Rücksicht mehr nehmen muss!

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!