Web

FA2PNG: Icon Fonts in PNG umwandeln – ganz einfach

FA2PNG: Icon Fonts 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 dem Konverter FA2PNG 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.

FA2PNG: 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.

FA2PNG: 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.

FA2PNG: 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. Du kannst die Auflösung und die Farbe einstellen und bekommst wirklich gute PNGs geliefert. Und das Ganze noch völlig kostenlos – was will der Mensch mehr!

Andreas Hecht

Andreas Hecht

Er entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

2 Kommentare Kommentar hinzufügen

  1. 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.

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen