Kategorien
(Kostenlose) Services Essentials Icons & Fonts

Glyphter: Mit dieser kostenlosen Web-App bauen Sie im Handumdrehen Ihren eigenen Icon Font aus beliebigen SVGs

Glyphter.com ist einer dieser Dienste, der mich aus dem Stand überzeugte. Er ist sehr einfach zu bedienen, arbeitet komplett fehlerfrei, sieht schick aus und hält auch ansonsten alle seiner Versprechen. Noch dazu ist er kostenlos nutzbar. Was könnte man mehr wollen? Lesen Sie weiter und sehen Sie, wie Sie Ihren eigenen Icon Font aus beliebigen SVGs erzeugen und das in einer Zeit, in der eine Senseo eine Tasse Kaffee brüht.

glyphr_prefilled_icons

Glyphter arbeitet mit jeder SVG und unterstützt bekannte Icon Fonts

Glyphter sieht auf den ersten Blick aus wie eine an Kinder gerichtete Kreation aus dem Hause Disney. Lebendige Farben, große Schrift, einfache Formen, ein knuddeliges Maskottchen – alles da für kleine Prinzen und Prinzessinnen…

Und ich muss zugeben, ich bin bei solchen einfachen Interfaces stets skeptisch. Zu oft musste ich schon erleben, dass sich diese Einfachheit auch im Featureset und dem übrigen Gesamtbild niederschlägt. Häufig wird eine zu einfache UI der Komplexität des Featureset auch nicht gerecht, so dass sich der vermeintliche Vorteil ins Gegenteil verkehrt. Aber, dass muss ich einräumen, das gilt alles nicht für Glyphter. Die UI passt perfekt zum Featureset. Eine Dokumentation oder auch nur eine kurze Einleitung ist gar nicht erforderlich.

Haben Sie Glyphter geöffnet, haben Sie im Wesentlichen zwei Wahlmöglichkeiten. Entweder klicken Sie das große Buch-Icon an der rechten unteren Ecke des Browserfensters. Auf diese Weise öffnen Sie eine Palette der populärsten Icon Fonts. Etwa ein halbes Dutzend Schriften der Kaliber Linecons, Font Awesome, Entypo und einige andere stehen bereit. Wählen Sie ein Icon aus und ziehen es mit gedrückter Maustaste auf die Mitte des Browserfensters, wo ein rötliches Grid darauf wartet, mit Icons befüllt zu werden. Legen Sie das gewählte Icon in einem der leeren Quadrate ab.

Oder klicken Sie ein leeres Quadrat direkt an. Auf diese Weise öffnen Sie den Öffnen-Dialog Ihres lokalen Dateisystems. Jetzt bewegen Sie sich zu dem gewünschten SVG-File, wählen es per Klick aus und bestätigen den Button "Öffnen". Ebenso funktioniert es, wenn Sie ein SVG mit der Maustaste aus einem Verzeichnis auf das Grid ziehen und auf einem leeren Quadrat los lassen. Diese Methode führt zum selben Ergebnis, ist aber viel schneller, jedoch naheliegenderweise nur für größere Auflösungen geeignet, in denen man zumeist eh nicht mit dem Browser in voller Bildschirmauflösung unterwegs ist.

Ist das Symbol aus dem gewählten Icon Font oder dem übergebenen SVG dann geladen, zeigt es sich als kleine Preview innerhalb des vormals leeren Quadrats. Hovern Sie mit der Maus über die Preview, erscheinen verschiedenen weitere Symbole. Mit einem Klick auf das sichtbar werdende X löschen Sie das Icon wieder, während das Stift-Symbol einen Editor auf der linken Seite des Browserfesters öffnet.

glyphr_edit_fonticon

Der Editor erlaubt Ihnen den Zugriff auf jeden einzelnen Pfad innerhalb des SVG. Eine Reihe per Schaltfläche erreichbarer Befehle bietet vielfältige Manipulationsmöglichkeiten. So können Sie Pfade löschen, bewegen, spiegeln, rotieren und skalieren. Auf diese Weise verändern Sie die Piktogramme bis zur Unkenntlichkeit, wenn Sie mögen.

glypher_edit_svg

Haben Sie Ihre Icons dann schlussendlich auf dem Grid verteilt und – nicht notwendigerweise – bearbeitet, geben Sie Ihrem Font einen Namen, klicken auf “Download Font” und warten Sie auf den Download, der als TTF, also im True Type Format erfolgt. Vor dem Download wird Ihnen angeboten, einen Account anzulegen, was Sie nicht tun müssen. Tun Sie es aber, werden Ihre Fonts auf der Plattform gespeichert und können so immer wieder von Ihnen bearbeitet werden, ohne dass Sie jedesmal von vorn beginnen müssen. Interessiert Sie diese Option nicht, klicken Sie “Just Download” und Ihr TTF sollte sich unverzüglich auf den Weg zu Ihnen machen.

Glyphter.com kann komplett kostenlos verwendet werden.

Kategorien
Essentials Icons & Fonts

Total Recall #5: 45+ grandiose freie Web- und Icon-Fonts

Im fünften Teil unserer Serie „Total Recall“ widmen wir uns freien Web-Fonts und ebenso freien Icon-Fonts. Für die Font-Nutzung im Web haben wir die Lizenz jeweils mit angegeben.

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

Fontastic.me: Frische Web-App zum freien Zusammenstellen eigener Icon Fonts

Vincent Le Moign aka Webalys ist kein Unbekannter unter Webdesignern. Erst kürzlich stellten wir Ihnen sein Projekt Agile Designers, ein Sammelbecken hochwertiger Design-Ressourcen vor. Darüber hinaus erstellt und vertreibt Webalys das Riesenset Minicons mit rund 1.500 einzelnen Piktogrammen. Massenhaft Freebies säumen seinen Weg. Heute stellen wir Ihnen mit Fontastic.me Le Moigns Interpretation eines gelungenen Icon Font-Baukastens vor. Dieser ist nicht nur leistungsfähig, sondern zudem kostenlos…

fontastic-homepage

Icon Fonts und modernes Webdesign

Icon Fonts setzen sich durch. Anstelle einzelner Grafiken oder Sprite-Sets mit mehreren Grafiken in einer Datei werden zunehmend Icons in der Form von Schriftarten eingesetzt. Diese erzeugen nicht für jedes Icon einen Request und müssen vor allem nicht für unterschiedliche Auflösungen in unterschiedlichen Varianten vorgehalten werden. Die freie Skalierbarkeit der Icon Fonts prädestiniert sie für den immer wichtiger werden Einsatz auf HiDPI-Geräten, wie dem Nexus 10 oder dem iPad5 oder der neuen Riege von FullHD-Smartphones.

fontastic-select-1v3

Nun gibt es eine ganze Reihe unterschiedlicher, qualitativ hochwertiger Icon Fonts am Markt. Was aber, wenn man nur einige wenige Icons aus einem Font mit 300 Zeichen verwenden will oder ergänzend noch einige Symbole aus Font X, Y und Z verwenden möchte? In diesen Fällen ist es sinnvoll, sich einen angepassten Icon Font zu konfektionieren, der lediglich die tatsächlich verwendeten Piktogramme enthält.

Genau zu diesem Zweck gibt es ein paar Dienste, denen sich jüngst ein weiterer zur Seite stellte. Mit Fontastic.me tritt ein neuer Dienst an den Start, der sich als direkter Konkurrent zu Icomoon und Fontello positioniert.

Sowohl IcoMoon, wie auch Fontello stellten wir unseren Leserinnen und Lesern bereits einzeln vor. Die Links zu den entsprechenden Artikeln finden Sie weiter unten in den Links zum Beitrag. Nur kurz zur Einordnung sei in Erinnerung gerufen, dass es sich bei IcoMoon um ein kommerzielles Angebot handelt, das auch in der Lage ist, Icons als Grafikdateien zu liefern, während Fontello ein freies Projekt ohne kommerziellen Hintergrund ist und via Github sogar als selbstgehostete Lösung eingesetzt werden kann.

Fontastic.me kombiniert die Vorzüge von IcoMoon mit denen von Fontello

Von der Handhabung und in Ansätzen auch hinsichtlich des Designs wirken Fontastic.me und Fontello extrem ähnlich. Fontastic.me integriert jedoch knapp 2.000 einzelne Icons, Fontello liegt deutlich darunter. Genau wie IcoMoon ist Fontastic.me in der Lage, vom User hochzuladende SVG-Dateien in den eigenen Icon Font zu integrieren. Fontello bietet diese Möglichkeit nicht.

Wollen Sie sich einen eigenen Font mit Fontastic zusammenstöpseln, so bedarf es lediglich einer unkomplizierten Registrierung mit Festlegung einer E-Mail-Adresse und eines Passworts. Danach werden Sie ohne Umschweife in den Font-Baukasten weitergeleitet. Hier greifen Sie wie in IcoMoon und Fontello per Mausklick die gewünschten Symbole auf, die dann unter einem frei zu vergebenden Namen als Custom Icon Font gesammelt werden.

fontastic-customize-2v3

Wie bei der Konkurrenz ist die Festlegung individueller Unicode-Zeichen für die Ansprache der Piktogramme vorgesehen. Weiterhin lassen sich die CSS-Klassen, die zur Ansteuerung der Icons über das CSS verwendet werden können, anpassen.

Eine Besonderheit von Fontastic.me ist die Möglichkeit, Icons per Data-Attribut, als Alternative zur klassenbasierten Ansteuerung, zu platzieren. Hierzu vergibt man einen Shortcut für jedes Zeichen und ruft das Icon entsprechend beispielsweise so auf:

Text neben Icon

Neben dem Import einzelner SVG-Dateien erlaubt Fontastic.me auch den Import kompletter SVG-Fonts. Der Dienst funktioniert nahezu intuitiv und kommt mit ausführlichen Erläuterungen zur Verfahrensweise daher, weshalb er sich ausgesprochen gut für Designer eignet, die sich dem Thema Icon Fonts eben erst nähern. Fontastic.me soll auf Dauer kostenfrei bleiben. Hinsichtlich der Nutzungsrechte an den integrierten Icon Fonts muss man im Zweifel ein bisschen aufpassen. Nicht alle sind voll kommerziell verwendbar, die Lizenzen sind jedoch prominent genannt.

fontastic-download-3v3

Fontastic.me wird in meinem Umfeld aufgrund der erweiterten Möglichkeiten und der noch einen Tick komfortableren UI das bisher favorisierte Fontello ablösen. Was halten Sie von dem Dienst?

Links zum Beitrag

  • Join the Icon Fonts Revolution | Fontastic.me
  • Agile Designers: Interessante Anlaufstelle für Design-Ressourcen | Dr. Web Magazin
  • Fontello: IcoMoon-Konkurrent hilft beim Zusammenstellen eigener Iconfonts | Dr. Web Magazin
  • IcoMoon: Hunderte Icons kostenlos als individueller Webfont | Dr. Web Magazin
Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts

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

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:

@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:


Oder so:


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: