de.hideout-lastation.com
Erstellen Sie Ihre eigene Schriftart Icon Set leicht mit Fontello
Wir können sehen, dass Font Icons weit verbreitet auf Websites verwendet werden, und das aus gutem Grund. Das Font Icon ist zuverlässig, sieht auf dem High-DPI-Bildschirm klar und scharf aus und lässt sich durch CSS leicht in Bezug auf die Symbolgröße, Farbe und Symbolposition anpassen. Dies macht es einfach, Zeichensymbole mit CSS3 Transforms und Transitions zu animieren.
Es gibt eine große Anzahl von Font-Icon-Sets zur sofortigen Verwendung, die jedoch nicht immer alle Ihre Bedürfnisse abdecken. Vielleicht möchten Sie Ihre Icons anpassen können . In diesem Fall ist es vielleicht besser, dass Sie ein eigenes Icon-Set erstellen.
Mit all den Tools, die wir jetzt haben, ist das Erstellen eines eigenen Font Icon- Sets nicht mehr so schwierig wie früher. In diesem Post wird Ihnen gezeigt, wie Sie das leicht machen können. Lass es uns überprüfen.
Vorbereiten der Symbole
Zuerst müssen wir die Icons vorbereiten. Die Symbole müssen in Vektorform sein. Wenn Sie mit Vektoranwendungen wie Adobe Illustrator, Inkscape und CorelDraw vertraut sind, können Sie eigene Symbole erstellen. Stellen Sie sicher, dass die Symbole einheitliche Eigenschaften beibehalten, und exportieren Sie sie anschließend im SVG-Format .
Alternativ können Sie auch SVG-Symbole sammeln, die online kostenlos zur Verfügung stehen.
In diesem Beispiel verwenden wir die SVG-Symbole von Ionicons. Ionicons hat eigentlich sein eigenes Font-Icon, aber in diesem Beispiel werden wir nur ein paar extrahieren, um zu erklären, wie man sein eigenes Icon-Set erstellt.
Hier ist, was ich ausgesucht habe:
Einige dieser Symbole bestehen aus mehreren Formen. Bevor wir sie also als Font-Icon aufstellen können, müssen wir die Shapes in einem Compound zusammenführen. Öffnen Sie dazu die .svg in Illustrator. Wählen Sie alle Formen und gehen Sie zu: Objekt > Compound Path > Make .
Mach das auch mit den anderen Icons.
Schrift erstellen
Fontello macht die Erstellung von Font Icon einfach. Neben dem Abrufen von Symbolen aus beliebten Font-Icon-Sets können wir mit Fontello auch externe Icons hochladen. Ziehen Sie einfach alle ausgewählten Symbole per Drag & Drop auf Fontello . Sobald sie hochgeladen sind, wird sie im Abschnitt Benutzerdefinierte Symbole angezeigt.
Sie können auf das Stiftsymbol klicken, um die Eigenschaften des Symbols, nämlich den CSS-Namen und den Hex-Code, zu bearbeiten.
Wählen Sie Ihre benutzerdefinierten Symbole, legen Sie den Namen Ihrer Schriftart fest und klicken Sie auf die Schaltfläche Download.
Fontello wird alle notwendigen Schriftarten generieren: .svg, .eot, .ttf und .woff . und die Stylesheets plus die Demo.
Das ist es. Das Erstellen von Schriften war noch nie so einfach. Ich hoffe, Sie finden diesen Tipp hilfreich.
20 kreative Untersetzer, die Sie auf jeden Fall lieben werden
Sie sagen, dass "zu Hause ist, wo das Herz ist", trotzdem tut es nicht weh, dein Zuhause so zu dekorieren, wie du es willst . Es gibt viele Möglichkeiten, wie Sie Ihren Platz komfortabler gestalten können, indem Sie beispielsweise Leuchten installieren oder den zusätzlichen Platz unter Ihrer Treppe verändern. Wa
15 Google Fotos Tipps für Hauptbenutzer
Auf der Oberfläche ist Google Fotos ein einfaches Tool, das Ihre Fotos und Videos automatisch anhand verschiedener Faktoren organisiert . Wenn wir jedoch einen genaueren Blick darauf werfen, verbirgt sich eine Menge toller neuer Funktionen, die das Organisieren von Fotos zum Kinderspiel machen.Ganz gleich, ob Sie ein professioneller Fotograf sind oder Ihre Familienerinnerungen bewahren möchten, Google Fotos bietet Ihnen alles, was Ihnen gefällt. D
