Share
Ich bin mir sicher, dass viele von Ihnen, die WordPress-Themes erstellen, Icons brauchen. Symbole sind eine großartige Möglichkeit, um einer Schaltfläche visuell Bedeutung zu verleihen oder ähnliche Elemente wie Tags oder Permalinks zu posten. Mit einer Symbol-Schriftart können Sie ganz einfach ein Symbol-Set zu Ihrem Design hinzufügen, anstatt es selbst erstellen zu müssen.
Es gibt einige tolle Icon-Fonts. Wenn Sie Bootstrap für Ihr Design verwenden, ist die Glyphicons-Symbolschriftart integriert. Für diesen Beitrag werde ich mich auf einen der beliebtesten konzentrieren: Font Awesome.
Sicher, es gibt andere Möglichkeiten, Symbole zu Ihrem Thema hinzuzufügen, aber ich möchte über die Vorteile der Verwendung einer Symbolschriftart anstelle von Bildern, Sprites usw. sprechen.
Der erste (und meiner Meinung nach beste) Vorteil ist, dass es sich um eine Schriftart handelt. Das bedeutet, dass Sie alle Vorteile des Stylings mit normalem Text erhalten. Sie können die Farbe und Größe eines Symbols mit ein wenig CSS leicht ändern. Es wird auch so scharf dargestellt, wie es Ihr Gerät zulässt. Das heißt, Sie müssen sich keine Sorgen um die Erstellung von retina-fähigen Grafiken machen.
Da alle Symbole in einer Schriftartdatei enthalten sind, muss nur eine HTTP-Anforderung geladen werden. Dies kann zu einer gewissen Leistung beim Laden von Seiten führen, wenn Sie mehrere Symbole verwenden. Sie können auch das für das Rendern der Symbole erforderliche CSS mit allen anderen verwenden .css Dateien, die Sie für Ihr Thema laden.
Es gibt verschiedene Möglichkeiten, Font Awesome zu Ihrem Design hinzuzufügen. Sie haben eine Reihe von Möglichkeiten dokumentiert, wie Sie Ihre Website auf ihrer Einstiegsseite hinzufügen können.
Die einfachste Möglichkeit, Font Awesome zu Ihrem Design hinzuzufügen, ist die Verwendung von BootstrapCDN. Sie müssen nur noch Folgendes hinzufügen in deinem Motto header.php Datei:
Oder besser noch, verwenden Sie die wp_enqueue_style Funktion.
Eine weitere Möglichkeit, Ihr Design hinzuzufügen, besteht darin, das Font Awesome GitHub-Projekt herunterzuziehen und es dem Stamm Ihres Designs hinzuzufügen. Sie müssten dann die Schrift mit der wp_enqueue_style Funktion.
Eine fortgeschrittene Methode ist die Verwendung von Sass oder LESS, je nachdem, was Sie in Ihrem Projekt verwenden. Sie möchten das hinzufügen font-awesome Ordner im Stammverzeichnis Ihres Projekts, dann müssen Sie einige Änderungen vornehmen.
Öffnen Sie Ihr Projekt font-awesome / less / variables.less oder font-awesome / scss / _variables.scss und bearbeiten Sie die @ fa-font-pfad oder $ fa-font-pfad Variable, die wie folgt auf Ihr Schriftverzeichnis zeigt:
$ fa-font-path: "fonts";
Sie müssen den bevorzugten CSS-Präprozessor Ihres Projekts neu kompilieren, um die Änderungen zu übernehmen.
Wenn Sie mit Bower vertraut sind, gibt es noch einen weiteren Weg. Sie würden die Dateien in verwenden bower_components / font-awesome Ordner während Ihrer Build-Aufgaben, anstatt sie zu Ihrem Projekt hinzuzufügen.
Sie müssen Font Awesome durch Ausführen installieren Bower installieren font-awesome --save und das würde es Ihrem Projekt hinzufügen bower.json Datei. Sie müssten dann die Sass- oder LESS-Dateien Ihres Themas auf die entsprechenden Dateien verweisen, um Ihre zu erstellen .css Datei. Sie können auch die Aufgabe "Grunt-Contrib-Copy" verwenden, um die Schriftarten in Ihren eigenen Ordner in Ihrem Projekt zu kopieren.
In meinem Beispielprojekt können Sie sehen, wie das geht.
Nachdem Sie Font Awesome zu Ihrem Design hinzugefügt haben, können Sie sie in Ihrem Design verwenden. Jedes Thema ist offensichtlich anders, aber ich werde einige Beispiele von Dingen zeigen, die für die meisten Themen relativ universell sein könnten.
Font Awesome wird mit einer Reihe von beliebten Symbolen für soziale Netzwerke und Marken geliefert. Meistens ist ein soziales Symbol ein Link, so dass wir die Symbolklasse dem Anker-Tag wie folgt hinzufügen können,
Sie können ein Beispiel für das Hinzufügen mehrerer Symbole im sehen footer.php Datei in meinem Beispielprojekt hier.
Ein weiterer guter Ort für die Verwendung von Symbolen sind die Metadaten Ihrer Beiträge, die ich bereits erwähnt habe. Die drei, die ich in dem Beispielprojekt hinzugefügt habe, sind der Kommentar-Link, die Tags und der Permalink.
Hier sind Beispiele für jeden:
Add Neu ',' Standard '), __ (' 1 ',' standard '), __ (' % ',' standard '), ","); ?>
Accentsconagua
'. __ ('% 1 $ s', 'tuts-font-awesome'). '', $ tag_list); ?> ">
Sie können alle diese Beispiele in meinen Beispielprojekten anzeigen loop.php Datei hier.
Das letzte Beispiel ist der Post-Paginierungs-Link. Ich füge gerne Chevrons vor "Older" und vor "Newer" hinzu. Wenn Sie das verwenden next_posts_link und vorherige_post_links In Ihrem Projekt sollten Sie eine Spanne mit der entsprechenden Klasse hinzufügen:
Ältere ',' tuts-font-awesome ')); ?>',' tuts-font-awesome ')); ?>Sie können alle diese Beispiele in meinen Beispielprojekten anzeigen pagination.php Datei hier.
Sie sollten jetzt alles haben, um mit Font Awesome in Ihrem WordPress-Theme zu beginnen. Ich habe einige Beispiele angeführt, bei denen ich häufig Symbole gefunden habe. Font Awesome bietet noch viel mehr Möglichkeiten, die Sie ausprobieren können, z. B. Stapeln, Drehen und animierte Symbole. Ich würde vorschlagen, die Font Awesome-Beispiele-Seite für all die zusätzliche Attraktivität zu betrachten.
