I ♥ Icon Fonts

We love icon fonts

Tim Pietrusky hat so ne Art "Google Web Fonts" für Icon-Fonts gebastelt, was alleine natürlich schon einen Blog-Post wert wäre… er hat aber außerdem noch die OpenWeb-Icons eingebaut, was definitiv einen Blog-Post wert ist 😉

Dank Tims "We Love Icon Fonts" lassen sich die Fonts mit folgenden paar Zeilen CSS-Code einbauen:

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

/* openwebicons */
[class*="openwebicons-"]:before {
  font-family: 'OpenWeb Icons', sans-serif;
}Code-Sprache: CSS (css)

Das Projekt ist übrigens Open Source und Tim würde sich sicherlich über jede Hilfe freuen!

Matthias Pfefferle
Matthias Pfefferle
@pfefferle@notiz.blog

Ich bin Webworker und arbeite als „Open Web Lead“ @ Automattic. Ich blogge, podcaste und schreibe eine Kolumne über das open, independent und federated social Web. Mehr über mich.

767 Beiträge
815 Folgende
Fediverse Reactions

7 Kommentare zu „I ♥ Icon Fonts“

  1. Avatar von Tim Pietrusky
    Tim Pietrusky

    Hey Matthias,

    danke für deinen netten Beitrag und die coole Schrift!

    Gruß
    Tim

    Antworten
    1. Avatar von Matthias Pfefferle

      gerne gerne 🙂

      Ich bau‘ übrigens gerade das ganze CSS auf SASS um… damit lässt sich dann auch viel einfacher ein CSS-File für „We Love Icon Fonts“ mit einer alternativen Prefix (openwebicons- statt icon-) raus rendern: https://github.com/pfefferle/openwebicons/blob/master/css/weloveiconfonts.css

      Antworten
      1. Avatar von Tim Pietrusky
        Tim Pietrusky

        Super geil 😀 Wenn jetzt noch die -colored raus wären sowie class + content in einer Zeile, dann wär es mega ideal für die Integration 😀

        Antworten
      2. Avatar von Matthias Pfefferle

        An dem -colored bin ich dran… Kann man die Formatierung über SASS regeln?

        Antworten
      3. Avatar von Tim Pietrusky
        Tim Pietrusky

        Du solltest beim compilieren der SASS auf jeden fall :compact als modus angeben. Dann ist jeder Style in einer eigenen Zeile. Für das andere Problem finde ich gerade auch keine Lösung 🙁

        Antworten
      4. Avatar von Matthias Pfefferle

        Ok, das mit den -colored-Icons ist fertig! Kann man das :compact auch irgendwie im file angeben? So dass sass --watch sass/:css/ jedes File individuell verarbeitet?

        Antworten
  2. Avatar von Tim Pietrusky
    Tim Pietrusky

    Ich möchte noch erwähnen, dass jeder, der das Projekt unterstützen möchte, seinen Senf hier http://www.df.eu/blog/2012/12/11/open-source-projekt-fur-lebenslanges-gratis-hosting-gesucht/#comments dazugeben kann! Es geht um Hosting-Sponsoring für ein Open-Source Projekt durch df.eu.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

To respond on your own website, enter the URL of your response which should contain a link to this post’s permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post’s URL again. (Find out more about Webmentions.)