Post navigation

Web · · 2 Kommentare

Wie nützlich: Icon Font in PNG umwandeln – ganz einfach

Icon Fonts sind eine tolle Sache. Doch manchmal benötigst Du vielleicht nur ein bis zwei Icons. Den Icon Font in PNG umzuwandeln wäre da die beste Lösung. Mit einem guten Konverter ist das eine Sache von nur wenigen Minuten.

Dann hast Du Deine favorisierten Icons als PNG-Datei vorliegen. Einen dieser Konverter möchte ich Dir heute vorstellen, denn ich habe ihn getestet und war von der Geschwindigkeit und dem Ergebnis positiv überrascht.

Icon Font in PNG umwandeln mit FA2PNG

Ein toller Konverter mit einem etwas sperrigen Namen ist FA2PNG. Der Online-Dienst macht Dir die Arbeit leicht, denn er verfügt über eine sehr gute Suchfunktion, mit dessen Hilfe Du Dir das richtige Icon zum Umwandeln aussuchen kannst.

Icon Font in PNG umwandeln

Links oben ist das Suchfenster. Ich habe nach einem Ordner gesucht.

Die weiteren Einstellungen von FA2PNG

Du kannst noch eine Menge toller Sachen mit diesem Generator machen. Zum Beispiel kannst Du die Farbe Deines Icons bestimmen, die Größe der Datei, die Seitenabstände und ob der Hintergrund transparent oder farbig sein soll.

Bestimme die Farbe der Datei, die Größe und den Hintergrund.

Bestimme die Farbe der Datei, die Größe und den Hintergrund.

Hast Du alles so eingestellt, wie Du es haben möchtest, klickst Du auf »Generate«. Einen Kurzen Augenblick später kannst Du Dir Dein Icon herunterladen.

Du hast noch die Möglichkeit, die Datei als Base64 zu nutzen, denn der passende Code wird gleich mit generiert. Da heute alles geteilt werden muss und darf, bekommst Du sogar noch einen Permalink zu Deiner generierten Datei, den Du teilen kannst.

Downloadlink, Base64 Code und ein Permalink zur Datei werden Dir zur Verfügung gestellt.

Download-Link, Base64 Code und ein Permalink werden Dir zur Verfügung gestellt.

Eine Beispiel-Datei. Die Qualität überzeugt

Hier die von mir aus dem obigen Beispiel generierte Datei. Der Icon Font ist »Font Awesome«, das Icon fa-folder-open.

Klicke für volle Auflösung.

Fazit

Ein wirklich guter Generator mit vielen Einstellungsmöglichkeiten und sehr guten Ergebnissen. Unbedingt empfehlenswert.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler, freier Journalist und Autor. Er schreibt für ein bekanntes deutsches Webdesign Magazin und ist nebenbei Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress.

2 Meinungen zu “Wie nützlich: Icon Font in PNG umwandeln – ganz einfach

  • Ich hätte da mal eine Frage:
    Weißt du bzw. ein(e) Leser(in) eventuell was zur Performance von Icon-Fonts vs. der von PNGs? Also Performance bzgl. Blog-Ladezeit.

    Ich hab bisher generell immer alles mit der PNG-Methode gemacht, weil ich es einfach so gewohnt war, als ich dann aber Social Media-Buttons für die Share- und Follower-Zahlenausgabe brauchte, hab ich ne Menge Icon-Fonts mit umfassend vielen Symbolen gefunden.
    Ist natürlich sehr bequem das alles einfach mit na Schrift zu machen, aber führt das nicht theoretisch auch zu spürbar höheren Ladezeiten des Blogs, da ja jedes mal die ganze Schriftart geladen werden muss? Oder sind Schriftarten in Sachen Performance generell besser als Bilddateien?

    • Hi,

      danke für Deinen Kommentar! Das lässt sich nicht pauschalieren. Wenn Du viele Grafiken einsetzt, ist die Performance eines Icon-Fonts besser, wenn er über ein CDN geladen wird. An Deiner Stelle würde ich immer Font Awesome verwenden, weil er sehr viele Icons mitbringt und schnell lädt. Lass die Datei im Footer laden vom CDN:

      <link rel=“stylesheet“ href=“//opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css“ type=’text/css‘ media=’all‘ property=’stylesheet‘ />

Schreibe einen Kommentar

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