Icon-Fonts sind derzeit im Trend. Sie machen es so einfach, Vektorgrafiken in eine Seite einzubetten, dass Designer überall sie als primären Weg für die Handhabung von Symbolen verwenden.
Das Problem ist natürlich, wir brauchen mehr Kontrolle darüber, welche Icons wir einbetten. Manchmal beziehen wir uns aus verschiedenen Quellen, einschließlich unserer eigenen Arbeit, und wir brauchen einen guten Weg, um alles zusammenzubringen. Geben Sie die Symbolzeichensatzgeneratoren ein. Folgen Sie uns, während wir einige unserer Favoriten miteinander vergleichen.
Warum ein Generator?
Der Nachteil bei der Verwendung einer Symbolschriftart besteht darin, dass Sie durch die Symbole eingeschränkt werden, die zufällig in der heruntergeladenen Gruppe enthalten sind. Wenn Sie drei verschiedene Symbole aus drei verschiedenen Sätzen einfügen möchten, müssen Sie drei verschiedene Schriftarten laden. Dies bedeutet, dass Sie hunderte von Symbolen laden müssen, die Sie nicht benötigen.
Wenn Sie sich für eine schlanke, gemeine Website ohne überflüssige Ressourcen und unnötige Ladeverzögerungen entscheiden, ist dies natürlich nicht der beste Weg, um Symbole einzufügen. Hier kommen die benutzerdefinierten Symbolschriftarten zum Einsatz. In diesem Szenario nehmen Sie Ihre drei Symbole in eine einzelne benutzerdefinierte Schriftart und binden diese in Ihre Seite ein.
Leider verfügen nicht alle über das Wissen oder die Ressourcen, um eigene Schriftarten zu erstellen. Machen Sie sich keine Sorgen, diese benutzerdefinierten Symbol-Schriftgeneratoren haben Sie abgedeckt. Unabhängig davon, ob Sie Ihre eigenen Symbole verwenden oder vorhandene Symbolsätze nutzen möchten, finden Sie unten ein Werkzeug, mit dem Sie Ihre Arbeit erledigen können.
Fontello
Der erste Generator, den wir testen werden, ist Fontello. Diese App ist superglatt, sehr einfach zu bedienen und hat elf kostenlose Iconsets, darunter Font Awesome und Iconic. Es gibt nicht Tausende von Symbolen zur Auswahl, aber es gibt definitiv genug, dass Sie finden sollten, wonach Sie suchen.
Wo wir gerade das finden, wonach Sie suchen, wird diese Aufgabe durch die sofortige Aktualisierung der Suchfunktion oben auf der Seite vereinfacht. Ich liebe die Live-Filterung hier, die viel besser ist, als darauf zu warten, dass eine neue Seite mit Ihren Suchergebnissen geladen wird.
Das Auswählen von Symbolen für Ihre benutzerdefinierte Schriftart ist so einfach wie das Klicken auf sie. Nachdem Sie die gewünschten Symbole gefunden und ausgewählt haben, springen Sie zur zweiten Registerkarte, in der Sie die Namen der einzelnen Symbole ändern können. Es sind nur wenige Anpassungsoptionen, die Fontello so großartig machen.
Der nächste Schritt ist das Auschecken der Codes bearbeiten. Registerkarte, damit Sie die Zeichen anpassen können, die jedem Symbol zugeordnet sind. Dies ist einfach genug, verwenden Sie einfach die bereitgestellten Felder.
Nachdem Sie die oben genannten Schritte ausgeführt haben, können Sie loslegen. Geben Sie einfach einen Dateinamen ein und klicken Sie auf den Download-Link, um Ihre benutzerdefinierte Schriftart zu erhalten.
Herunterladen
Der Fontello-Download enthält satte vierzehn Dateien, die sich auf mehrere Ordner verteilen. Der Fußabdruck jeder Datei ist winzig, aber die schiere Anzahl von Elementen, die Sie erhalten, kann für jemanden, der nach einer einfachen Lösung suchte, überwältigend erscheinen. Trotzdem ist es wirklich schön, ein voll funktionsfähiges Beispiel zu haben, aus dem gearbeitet werden kann, und es wurde viel unternommen, um sicherzustellen, dass alles so browserkompatibel wie möglich ist.
IcoMoon
Die nächste App, die wir uns ansehen werden, ist IcoMoon. Um ehrlich zu sein, es ist Fontello sehr ähnlich, aber es gibt einige wichtige Unterschiede, die es zu prüfen gilt.
Wie bei Fontello können Sie entweder durch Scrollen durch die Symbole blättern oder die integrierte Suchfunktion verwenden, um etwas Bestimmtes zu suchen.
Es sind viel mehr Symbole verfügbar, als Sie standardmäßig sehen. Um den Rest zu überprüfen, klicken Sie auf die Bibliothek. Schaltfläche am oberen Rand des Bildschirms.
Sie gelangen auf eine Seite mit derzeit 16 verschiedenen Sammlungen, von denen viele kostenlos sind, während andere gekauft werden müssen.
Andere Ressourcen importieren
Eine der besten Funktionen von IcoMoon ist die Möglichkeit, andere Ressourcen zu importieren, um sie in Ihren benutzerdefinierten Build aufzunehmen. Sie können andere Symbolschriftarten oder sogar Ihre eigenen SVG-Grafiken hochladen. Dies macht IcoMoon zu einer großartigen Ressource für alle, die ihre eigene Icon-Schriftart von Grund auf erstellen möchten.
Die Schrift generieren
Sobald Sie Ihre Symbole ausgewählt haben, können Sie mit dem Button unten auf der Seite mit dem Herunterladen Ihrer Schriftart fortfahren. Beachten Sie auch, dass Sie die Option haben, die Symbole als Bild herunterzuladen (dadurch wird eine Spriteseite erzeugt).
Genau wie bei Fontello haben Sie vor dem Download einige Optionen zum Ändern der Einstellungen und zur Kodierung Ihrer Schriftart.
Herunterladen
Der Download ist hier wesentlich geringer als bei Fontello. Es gibt nur neun Dateien, von denen fünf die eigentliche Schriftart sind. Grundsätzlich bietet Fontello eine Reihe von CSS-Dateien, während IcoMoon es zu einer komprimiert. Dadurch ist alles viel einfacher zu durchsuchen und auch die Demo-Seite ist etwas schöner.
Pictonic
Als nächstes steht Pictonic auf unserer Liste. Um diese Site nutzen zu können, müssen Sie sich für ein Konto anmelden. Von dort haben Sie drei Möglichkeiten. Sie können die kostenlosen Symbole verwenden, kostenpflichtige Symbole für 0,59 US-Dollar pro Symbol verwenden oder uneingeschränkten Zugriff für 199 US-Dollar erhalten.
Hier sehen Sie die gleichen Übungen wie zuvor, verwenden Sie die Live-Suchfunktion oder durchsuchen Sie die verfügbaren Symbole, indem Sie durch Scrollen die gewünschten Symbole anklicken.
Es gibt auch ein Dropdown-Menü, mit dem Sie die Ergebnisse einfach nach Kategorie filtern können. Dies ist auch eine gute Möglichkeit, die 320 kostenlosen Icons (meistens soziale Logos und Software-Logos) zu sehen.
Herunterladen
Dieses Mal sehe ich keine Optionen zum Anpassen des Downloads. Klicken Sie einfach auf "Weiter". dann? herunterladen? und Sie erhalten, was sich als unser bisher größter Download herausstellt.
Mit Pictonic erhalten Sie die Dateien automatisch so, wie Sie möchten: Schriftdateien, PNGs und SVGs. Die Anzahl der Dateien, die Sie erhalten, hängt von der Anzahl der ausgewählten Symbole ab.Ich finde es toll, dass ich alle diese Optionen habe, aber ich möchte wählen, was ich vor dem Download mache und nicht möchte.
Pictos Server
Ich habe den Ausreißer zum Schluss gerettet. Pictos Server geht etwas anders vor als die anderen Websites. Anstatt eine benutzerdefinierte Schriftart zu erstellen, die Sie herunterladen und auf Ihrem eigenen Server einbetten, hostet Pictos die Symbole für Sie. Es ist allgemein als "das Typekit der Icons" bekannt, was eine anständige Beschreibung dessen ist, was Sie von dem Service erwarten können.
Nach meiner Zählung gibt es derzeit rund 338 Icons zur Auswahl. Sie können das Angebot einschränken, indem Sie eines der Pictos-Sets auswählen oder nach einem bestimmten Element suchen.
Nachdem Sie die Symbole ausgewählt haben, können Sie die Zeichen eingeben, die jedes Symbol darstellen sollen. Von hier aus klicken Sie einfach auf "Code generieren". Schaltfläche, die Ihnen einen CSS-Einbettungslink gibt, den Sie einfach in Ihre Datei werfen.
Preisgestaltung
Da es sich bei Pictos um einen Hosting-Service handelt, ist natürlich eine monatliche Gebühr fällig. Die Preise für die Pläne werden nach Seitenaufrufen festgelegt, beginnend mit 0 USD für bis zu 25.000 monatliche Ansichten bis zu 50 USD für bis zu 4.000.000 monatlichen Ansichten.
Es ist auch wichtig zu wissen, dass der freie Plan auf zwölf Symbole pro Schriftart beschränkt ist.
Wie vergleichen sie?
Offensichtlich ist die Antwort auf die Frage, welche Site am besten ist. hängt von Ihren spezifischen Bedürfnissen ab. Jeder Standort scheint auf seine eigene Weise hervorzuheben. Wenn Sie nach der einfachsten Lösung suchen, können Sie Pictos Server nicht schlagen. Es ist wirklich sehr wenig Arbeit und das Einbetten der Icon-Schrift ist ein Kinderspiel.
Wenn Sie nach einer Menge kostenloser Schriftarten suchen, ohne sich für ein Konto anmelden zu müssen, besuchen Sie Fontello. Es ist ein großartiger Service mit vielen Optionen und ist wahrscheinlich alles, was Sie brauchen.
In Bezug auf Funktionen und Optionen ist IcoMoon kaum zu überbieten. Ich finde es toll, dass Sie damit Ihre eigene Arbeit oder andere Icon-Schriften, die Sie gefunden haben, hochladen und integrieren können. Es gibt auch eine Menge kostenlose Icons und sogar einige Premium-Packs, wenn Sie wirklich alles machen wollen.
Alles in allem war Pictonic wahrscheinlich mein am wenigsten geliebter Favorit. Die kostenlose Symbolauswahl war nicht so toll, und Sie haben nicht die Anpassungsoptionen, die andere Dienste bieten. Was mir an Pictonic gefällt, ist das unkomplizierte Preismodell für Premium-Icons: 0,59 US-Dollar pro Symbol oder 199 US-Dollar für uneingeschränkten Zugriff. Schön und einfach!
Welcher Icon Font Generator ist dein Favorit?
Insgesamt sind alle vier dieser Dienste einen Besuch wert. Sie sind alle sehr einfach zu bedienen und vollgepackt.
Nun, da Sie meine Gedanken zu diesen vier Fontgeneratoren gesehen haben, lassen Sie unten einen Kommentar und sagen Sie mir Ihre Gedanken. Haben Sie in früheren Projekten einen dieser Dienste genutzt? Was empfehlen sie Welche anderen Optionen gibt es da draußen, die ich vermisst habe?