Haben Sie sich jemals gefragt, wie Sie Ihrer App elegante, skalierbare Symbole hinzufügen können, ohne an Geschwindigkeit oder Qualität einzubüßen? Dafür sind Icon-Schriften da! Icon-Fonts sind genau wie normale Schriften, aber statt Zahlen und Buchstaben verwenden wir Icons. Diese Symbole können alles sein, von einfachen Formen und Pfeilen bis hin zu komplexeren Darstellungen von Objekten oder Konzepten. Symbolschriften wurden zuerst im Webdesign beliebt, da sie es Entwicklern und Designern ermöglichen, skalierbare Vektorsymbole auf einfache Weise in Websites einzufügen. Danach wurden sie aus dem gleichen Grund zu einem Muss in der App-Welt.
Beide in Test-UI-Kit, und unsere benutzerdefinierten Dienste, verwenden wir Icon-Fonts, weil sie unser Leben viel einfacher machen. Die Verwendung von Icon-Fonts bietet viele Vorteile:
In diesem Artikel behandeln wir alles, was Sie über Icon-Fonts wissen müssen, von der Auswahl vorhandener Icon-Fonts bis hin zu einer schrittweisen Anleitung, wie Sie Ihre eigene Schrift erstellen.
Es gibt viele Icon-Bibliotheken, die sich der Bereitstellung von Icons widmen. Viele von ihnen basieren auf einem Abonnement, aber machen Sie sich keine Sorgen! Es gibt noch andere großartige kostenlose Optionen, um mit der Erstellung Ihrer eigenen Icon-Schrift zu beginnen. Werkstoffdesign von Google, verfügt über eine umfangreiche Bibliothek mit Symbolen, die Sie kostenlos herunterladen können.
Eine weitere großartige Bibliothek, die nicht nur einen kostenlosen Tarif anbietet, sondern auch ein Figma-Plug-In enthält, ist Schrift Awesome. Wenn Sie jedoch immer wieder nach anderen Symbolbibliotheken suchen können, die zu Ihrem App-Stil passen, gibt es jede Menge.
Obwohl es sehr einfach ist, ist dieser Schritt wichtig, denn um eine makellose Icon-Schrift zu haben, müssen die Icons einige besondere Eigenschaften haben. In unserer Figma-Projektdatei sollten wir einen Rahmen haben, der diese Symbole enthält. Wir können sie der Organisation halber sogar in Unterüberschriften zusammenfassen. Die Symbole sollten die folgenden Eigenschaften haben:
Das war's. Wenn Ihre Icons diese Anforderungen erfüllen, sind Sie bereit, sie als SVG zu exportieren und die letzten Schritte zu befolgen.
Nachdem wir unsere Icons ausgewählt und vorbereitet haben, besteht der nächste Schritt darin, unsere Icon-Schrift zu erstellen. Bei UXDivers verwenden wir Ich Komond, und ich habe tolle Neuigkeiten! IcoMoon bietet sowohl einen kostenlosen als auch einen kostenpflichtigen Tarif an. Der einzige Unterschied zwischen den beiden ist, dass Sie beim kostenlosen Tarif lokal im Cache Ihres Browsers speichern. Das heißt, wenn Sie Ihren Computer wechseln oder Ihren Cache leeren, ist das alles, Sie können nicht zurückkommen und etwas bearbeiten.
1. Kostenloses Set entfernen: Das erste, was Sie sehen werden, ist eine Reihe von Symbolen namens „IcoMoon - Free“. Sie können diesen Satz von Symbolen entfernen, indem Sie auf die drei Zeilen rechts neben dem Titel klicken und auf „Set entfernen“ klicken.
2. Symbole importieren: Auf der linken Seite der Navigationsleiste befindet sich eine lila Schaltfläche mit der Aufschrift „Symbole importieren“. Wenn du darauf klickst, erscheint ein Dialogfenster und du kannst deine Icons importieren.
3. Auswahl: Nachdem Sie Ihre Icons importiert haben, sollte ein neues Set mit dem Namen „Untitled Set“ erscheinen. Wählen Sie alle Symbole aus, die Sie in der Schrift haben möchten.
Profi-Tipp: Um die Symbole schnell auszuwählen, können Sie einfach klicken und den Cursor über die Symbole ziehen, die Sie auswählen möchten.
4. Schrift generieren: Nachdem Sie Ihre Symbole ausgewählt haben, sollte in der unteren Navigationsleiste eine Schaltfläche mit dem Namen „Schrift generieren“ verfügbar sein. Klicken Sie darauf.
5. Präferenzen: In diesem Stadium können Sie auf die Schaltfläche „Einstellungen“ auf der linken Seite der Navigationsleiste zugreifen, um den Namen der Schrift und andere Einstellungen zu ändern, die Sie möglicherweise bearbeiten möchten.
6. Herunterladen: Das war's! Sie können Ihre Schrift jetzt herunterladen, indem Sie auf die Schaltfläche „Herunterladen“ auf der rechten Seite der unteren Navigationsleiste klicken.
Wenn Sie diese Schritte befolgen, verfügen Sie jetzt über die Tools zum Erstellen und Implementieren Ihrer eigenen Icon-Fonts, wodurch sowohl die Funktionalität als auch die visuelle Attraktivität Ihrer Apps verbessert werden.
Icon-Fonts bieten eine nahtlose Möglichkeit, die Konsistenz, Skalierbarkeit und Organisation Ihrer Designs aufrechtzuerhalten. Ob Sie sie verwenden in Testkit Für Ihre eigenen persönlichen Zwecke sind Icon-Fonts ein wesentlicher Bestandteil der modernen App-Entwicklung, die Ihren Arbeitsablauf reibungsloser und Ihre Apps ansprechender machen können. Warum probieren Sie es also nicht aus und sehen Sie, wie Icon-Schriften Ihr nächstes Projekt aufwerten können?
