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 stilvolle wasserfeste Uhren für den Sommer
Während die Tech-Welt über Smartwatches ausflippt (2014 scheint das Jahr für Smartwatches zu sein), erhalten viele nicht so intelligente Uhren ein Upgrade in Design und Stil. Wenn Sie nach einer Uhr suchen, um genau das zu tun, was Uhren am besten können, während Sie immer noch in der Lage sind, die Sommerspritzer zu rauen, ist dieser Posten definitiv für Sie. Hier
10+ Awesome Vivaldi Browser Features, die Sie lieben werden
Vivaldi ist ein einzigartig schneller, flexibler und funktionaler Browser, der auf dem Chromium-Projekt aufbaut und die besten Opera- und Google Chrome-Browser in einem einzigen Browser vereint.Vivaldi enthält innovative Funktionen, die sowohl für Normal- als auch für Power-User nützlich sind und eine schnellere Navigation, ein intelligenteres Browsen, eine umfangreiche Tab-Verwaltung, clevere Lesezeichen und Shortcuts sowie eine visuelle Herangehensweise an das Browsen versprechen. Vi
