Verwenden der Genericons-Schriftart auf Ihrer Website

Ich glaube, dass Icon-Fonts eine der großartigsten Ideen sind, die jemals im goldenen Zeitalter des Webdesigns geboren wurden. Einige großartige Leute bei Automattic fühlen sich wahrscheinlich genauso, da sie sich dazu entschieden haben, mit einem schönen Icon-Font namens Genericons zu kommen. In diesem Artikel erfahren Sie, wie großartige Symbol-Schriftarten sind und wie Sie die Genericons-Schrift verwenden können.

Die Bedeutung von Icon-Fonts

Wie gesagt, wir leben im goldenen Zeitalter des Webdesigns. Jeden Tag werden neue Technologien entwickelt und von Browsern schnell übernommen. Neben den neuen Technologien gibt es auf der ganzen Welt neue Designtechniken.

In dieser goldenen Ära ist das responsive Webdesign wohl eines der beliebtesten Konzepte. In einer Welt voller verschiedener Geräte, die mit dem Internet verbunden sind, wie Laptops, Tablets und Smartphones, gestalten wir unsere Designs entsprechend den Geräteabmessungen und Pixeldichten. Als Webdesigner ist es zur täglichen Angewohnheit geworden, Elemente und Grafiken zu skalieren, damit unser Design auf einer Vielzahl von Geräten funktioniert, von 27-Zoll-Apple-Monitoren bis zu Kindles.

Das ist, wo Icon-Fonts nützlich sind.

Vorteile der Verwendung von Icon-Schriftarten

Als Geschenk des responsive Webdesigns werden Icon-Fonts verwendet, um Besuchern auf jedem Gerät ein optimiertes und skalierbares Grafikpaket anzubieten. Dank der Cross-Browser-Kompatibilität können wir sie sogar mit alten Browsern verwenden, sodass unsere Großeltern und die Leute beim DMV auch knackige, brandneue Icons genießen können!

Spaß beiseite, hier sind die Hauptvorteile, die Sie mit einer Symbolschriftart nutzen können:

Symbolschriften sind skalierbar. Dies bedeutet, dass Sie unabhängig von der Größe Ihres Symbols keine Kompromisse bei der Bildqualität oder der Dateigröße machen müssen.
Symbolschriften können mit einfachen CSS-Zeilen erweitert werden. Sie müssen Ihren großen Bildeditor nicht öffnen, um die Farben zu ändern oder Schatten hinzuzufügen. Transparenz? Prüfen. CSS-Farbverläufe Prüfen. 3D-Drehung? Prüfen. Du hast die Idee. Mit ein paar Zeilen CSS-Code können Sie fast alles tun, was Sie für Ihren Text tun können. Immerhin handelt es sich bei diesen Symbolen eigentlich um Textstücke.
Icon-Schriften haben eine großartige Browser-Unterstützung. Da sind sie Schriftarten Selbst wenn Internet Explorer 7 Schriftarten unterstützt, müssen Sie sich keine Sorgen machen, ob diese in älteren Browsern nicht angezeigt werden.
Icon-Schriftarten haben eine geringe Dateigröße. Das hört sich vielleicht nach einem kontroversen Argument an (da ein Paket von PNG-Symbolen fast so klein wie ein Icon-Zeichensatz sein kann), aber Sie können sehen, dass das WOFF-Format von Genericons zum Beispiel nur 11 KB groß ist. Plus müssen Sie Dinge wie hinzufügen mein-icon-2x.png wenn Sie größere Bilder benötigen Symbolzeichensätze stellen auch nur eine HTTP-Anforderung.

Chris Coyier hat eine Demo-Seite für Icon-Fonts, auf der er einige der Vorteile von Icon-Fonts aufführt und diese ausprobieren kann.

Das Genericons-Symbol ist ab Dezember 2013 festgelegt

Genericons verwenden

Genericons ist eine ziemlich großartige Icon-Schrift, die von Automattic, den Gründern von WordPress, erstellt wurde. Die Schriftart enthält Ende 2013 121 Icons und wächst mit der Zeit. Es ist auch mit der GPL lizenziert, sodass wir dieses süße Symbolpaket in allen unseren Open Source-Projekten mit kompatiblen Lizenzen verwenden können.

Wenn Sie in Ihrer WordPress-Website keine Symbol-Schriftart verwenden, ist es jetzt an der Zeit, Genericons hinzuzufügen!

Aufnahme in dein Thema

Wenn Sie diese Symbolschriftart in Ihrem Design verwenden möchten, müssen Sie einige einfache Schritte ausführen:

Laden Sie Genericons herunter, indem Sie auf den Riesen klicken Herunterladen Schaltfläche auf der Website.
Laden Sie das hoch Schriftart Ordner im Stammordner Ihres Themes. Wenn Sie möchten, können Sie den Ordner umbenennen und in einem anderen Ordner ablegen.
Kopieren Sie den Inhalt der genericons.css Datei in Ihrem Thema style.css Datei. (Wenn Sie den Namen und den Pfad des Zeichensatzordners geändert haben, vergessen Sie nicht, Änderungen am CSS vorzunehmen, um den Pfad der Zeichensatzdateien zu ändern.)

Das ist es, Ihr Theme ist jetzt zu 100% kompatibel! Sie können nun die Symbole in Ihren HTML-Elementen wie folgt verwenden:

 Dieser Link hat das Tabletsymbol!

Wenn Sie ein Symbol als separates Element verwenden möchten, müssen Sie das Symbol verwenden HTML-Element wie folgt:

Dieser Link hat auch das Tabletsymbol!

Beachten Sie, dass Sie zwei CSS-Klassen verwenden müssen: genericon und genericon- icon-name. Ich werde die Symbolnamen nicht in diesen Artikel einfügen (da der Schriftart regelmäßig neue Symbole hinzugefügt werden), aber Sie können eine kategorisierte Liste von Symbolnamen im anzeigen genericons.css Datei. Alternativ können Sie genericons.com überprüfen und auf jedes Symbol klicken, um den entsprechenden Namen anzuzeigen.

Verwendung mit dem Genericon-Plugin

Wenn Sie die Schriftart nicht in Ihr Design integrieren möchten und stattdessen das Icon-Pack mit einem separaten Plugin verwenden möchten, können Sie das Genericon-Plugin von wordpress.org verwenden.

Die Verwendung ist fast gleich - Sie müssen lediglich eine weitere Klasse mit dem Namen hinzufügen genericond:

Dieser Link hat das Tabletsymbol! Dieser Link hat auch das Tabletsymbol!

Alternativ können Sie einen Kurzcode verwenden:

[genericon icon = tablet] Dieser Link hat auch das Tablet-Symbol!

Beachten Sie, dass Sie nur dieses Mal den Symbolnamen verwenden müssen.

Fazit

Symbolzeichensätze sind aus verschiedenen Gründen beliebt: Skalierbarkeit, Benutzerfreundlichkeit und Abwärtskompatibilität. Mit einer kleinen Datei können alle Webdesigner und Entwickler von dieser erstaunlichen kleinen Technik profitieren.

Was denkst du über Genericons? Teilen Sie uns unten Ihre Kommentare mit! Und wenn Ihnen der Artikel gefallen hat, teilen Sie ihn mit, um auch Ihre Freunde über Genericons zu informieren!

Code