Icon-Fonts sind unglaublich nützlich beim Entwerfen einer Site und haben eine große Anzahl von Vorteilen gegenüber regulären Icons.

Da sie als Schriftdatei bereitgestellt und wie eine Schriftart eingebettet sind, sind diese Symbole leicht skalierbar, ihre Farbe kann live geändert werden, anstatt Bilder bearbeiten zu müssen. Darüber hinaus können verschiedene Effekte wie Schatten, Stroke-Effekte oder Farbverläufe per Codierung hinzugefügt werden, was sie vielseitiger als Bilder macht.

Hier werden wir einige der besten Icon-Fonts, die das World Wide Web zu bieten hat, für Sie auf Ihren Websites zusammenfassen.

Fico

Fico ist eine fantastisch aussehende Schrift, die auf einer schönen Seite präsentiert wird, was es zu einer Freude macht, sie herunterzuladen und zu benutzen. Die Website zeigt deutlich, welcher Buchstabe oder welche Glyphe für jedes Symbol verwendet wird. Dadurch wird der manchmal schmerzhafte Vorgang des Herunterladens einer Symbolschriftart entfernt, sodass Sie keine Ahnung haben, wo Sie die einzelnen Symbole auf Ihrer Tastatur finden können. Diese Icons sehen fantastisch aus in Verbindung mit Helvetica, die sauberen, glatten Linien, die thematisch zusammenwirken, schaffen ein Gefühl dafür, dass Fico für serifenlose Schriften gemacht wurde. Weitere Beispiele finden Sie auf ihrer Website.

Pixeliert

Pixeliert ist eine Schrift, die trotz ihres Charmes einen praktischen Nutzen hat. Pixelated ist extrem leicht, die Symboldateigröße beträgt durchschnittlich 60 Bytes! Nicht Megabyte oder sogar Kilobytes, Bytes! Sie können sie auch als transparente GIFs herunterladen, also sind sie kompatibel zu IE6, und wenn Sie sie bearbeiten möchten, können Sie eine PSD herunterladen. Die Schrift kommt mit zwei Farbschemata, die unten gezeigt werden, wodurch sie noch einfacher zu verwenden sind. Es ist komplett kostenlos und steht für kommerzielle Nutzung zur Verfügung!

Entypo

Überraschenderweise für eine Schrift mit 100+ Symbolen, Entypo kommt völlig kostenlos und ist wie Pixelated für den kommerziellen Einsatz verfügbar. Sie kann zusammen mit der OpenType-Schriftartdatei als Vektordatei zum Bearbeiten heruntergeladen werden. Diese Schriftart erinnert sehr an die Apple-Schnittstellensymbole, die in iOS5 und OSX10 verwendet werden, und als nette Geste werden 50% aller Spenden auf der Website der Schriftart an Wikipedia gespendet.

Uicons

Neben dem ziemlich witzigen Namen, Uicons bieten 391 Icons in ihrem Set und enthalten Social Network-spezifische Icons, die oft in Icon-Fonts vermisst werden. Es ist nicht überraschend, dass dieses Set nicht kostenlos ist, aber für eine relativ billige $ 20 sind alle nachfolgenden Updates der Schriftart kostenlos. Diese Symbole sind so konzipiert, dass sie unbegrenzt skalierbar sind und das Responsive Design von 1080p-Desktop-Displays bis hin zu mobilen Geräten wie dem iPhone viel einfacher macht. Es kann in mehreren Formaten heruntergeladen werden, jedoch nicht als Schriftart, es ist in dieser Liste enthalten, da Support noch aussteht, und es verdient einen Platz hier.

Ikonisch

Ikonisch ist ein Open-Source-Icon-Set bestehend aus 171 Icons in verschiedenen Formaten, darunter auch als Schriftart. Es ist so konzipiert, dass es skalierbar ist. Es zielt darauf ab, die fortschrittlichste Ikone zu sein, basierend auf der Unterstützung von vorwärts gerichteten Darstellungs- / Bereitstellungsmethoden. Icons sollten nicht nur klar und attraktiv sein, sie sollten einfach und flexibel zu handhaben sein. ' Die Open-Source-Natur dieser Schrift bedeutet, dass sie aus der Notwendigkeit heraus hinzugefügt wurde, wenn Symbole benötigt wurden, anstatt von Anfang an als ein Satz geplant zu sein, was dazu führte, dass einige ziemlich interessante und weniger als herkömmliche Symbole in dem Satz enthalten waren.

Sanscons

Dies ist eine Anpassung einer anderen Schriftart, Bitcons , eine Reihe von 120 Icons in 10 verschiedenen Farben und verschiedenen Größen. Sanscons zielt darauf ab, Bitcons CSS-freundlicher zu machen, mit transparenten Hintergründen und 13 Farben. Die Icons sind auch in den Formaten 16 × 16, 32 × 32 und 64 × 64 Pixel erhältlich. Die 32 × 32 und 64 × 64 Icons haben ein chunkigeres Aussehen und behalten den Pixelstil bei. Das Set ist kostenlos unter der Creative-Commons-Lizenz.

Heydings

Heydings ist eine Schrift, die aus dem "frustrierenden Mangel an qualitativ hochwertigen, kostenlosen Icon-Web-Fonts, die für die Einbettung verfügbar sind" in den Worten des YouTubers erstellt wurde. Es enthält 60 Glyphen, und die Website bietet sogar CSS, um Ihre Codierung mit der Schrift zu erleichtern. Der Autor hat die Symbole auch alphabetisch abgebildet, um die Benutzerfreundlichkeit zu erhöhen. Diese sind so konzipiert, dass sie als Teil der Hauptbenutzeroberfläche Ihrer Site verwendet werden können. Daher decken die Glyphen eine große Bandbreite für verschiedene Websites ab.

Nur Vektor

Dieses Icon-Set wird von einer umfangreichen Website begleitet, die alle Aspekte von Nur Vektor Von der Darstellung im Browser bis zur Darstellung auf einer formatierten Website in verschiedenen Größen, zusammen mit dem Code, der das @ fontface'ing erleichtert. Es enthält sogar eine praktische Anleitung zur Fehlerbehebung, die für alle Webfonts gilt und das Laden in verschiedenen Browsern, einschließlich mobiler, umfasst. Die Website demonstriert die Skalierbarkeit der Schrift und zeigt Größen, die viel größer sind, als viele Icon-Schriften unterstützen.

Flexi Sozialikonen

Flexi steht auf myfonts.com zur Verfügung, das eine Seite bietet, die das Rendern der Schriftart in mehreren Browsern zeigt. Die Schriftart hat 68 Glyphen und kostet $ 29, und ebenso wie ein Webfont bietet OpenType OTF und TrueType-Optionen für die Vielseitigkeit.

SchreibeSozial

Writesocial hat nur die 18 Symbole, die unten gezeigt werden, aber die $ 10 sind in den Variationen gerechtfertigt, in denen sie kommen können, mit Optionen wie Quadrat- oder Kreisikonen. Es kommt mit einem Open-Type-Format, sowie lizenziert für die Verwendung mit @ font-Face. Beim Kauf erhalten Sie eine HTML-Datei mit mehreren @ font-face Nutzungsbeispielen der Schriftart. Außerdem können Sie 15 US-Dollar anstelle der Standard 10 US-Dollar für die Schriftart bezahlen, wobei 10 US-Dollar von den 15 US-Dollar an Charity: Water gehen.

ikoo

ikoo ist eine Schriftart, die speziell entwickelt wurde, um in eine HTML-Seite integriert zu werden, ohne Bilder über @FontFace oder andere Mittel zu verwenden. Es ist auf Site-Navigation ausgerichtet und bietet eine Reihe von wirklich sauberen Icons in weißen und schwarzen Varianten, mit insgesamt 65 kostenlosen Icons.

InfoBits (Icons & Dingbats)

Dies gibt Ihnen zwei Sätze für den Preis von einem, nur $ 29 für 190 Zeichen, InfoBits hat zwei separate Schriftarten, die unten abgebildet sind, die auch einzeln für je $ 19 erhältlich sind. Die Charaktere haben einen spielerischen, aber traditionellen Stil mit einer großen Auswahl an Anwendungen und Optionen, die sowohl für die Site-Navigation als auch für andere periphere Anwendungen äußerst vielseitig sind.

Bilder

Bilder ist ein Icon-Set in einer überwältigenden Anzahl von Formaten, und die Seite hat eine eingebaute Tastatur, um Ihre eigene Pictos-Schriftart anzupassen. Es enthält 650 Symbole und wird als gut genug angesehen, um im gesamten Web von Websites wie Microsoft, Adobe und BitTorrent verwendet zu werden. Aufgrund der benutzerdefinierten Schriftartfunktionalität wird es direkt von den Pictos-Servern verwendet und erfordert nach 10-tägiger kostenloser Testphase ein skalierbares Abonnement. Es ist eine unglaublich attraktive Schriftart, und es ist leicht einzusehen, warum sie von so vielen seriösen Websites verwendet wird.

Schrift Awesome

Dies Schriftart wurde entwickelt, um mit dem Bootstrap-CSS-Framework von Twitter verwendet zu werden, einschließlich 220 Icons, die Beispiele für die Icons geben, die in der Bootstrap-Oberfläche ihrer Site verwendet werden. Sie sind auch als Vektor-Icons für die einfache Bearbeitung gegeben, und die neue Version 2.0 unterstützt IE7, für maximale Kompatibilität.

Was findest du am nützlichsten, ein Cart, ein Twitter-Icon? Haben wir eines deiner Lieblingssets vermisst? Lassen Sie es uns in den Kommentaren wissen.