WordPress. Wie ändert man FontAwesome Icons

Ryan DeWitt Oktober 29, 2013

Rating: 5.0/5. From 2 votes.

Please wait...

Dank diesem Tutorial erfahren Sie, wie ändert man Icons Font Awesome in WordPress Vorlagen.

WordPress. Wie ändert man Icons FontAwesome

Lassen Sie uns die Icons aus der Beschreibung des Posts ändern. Diese Icons werden mit der Schriftart Font Awesome angezeigt.
Prüfen Sie das Icon mit Hilfe von der Software für Firebug Entwickler. Die ausführliche Information, wie manк Firebug verwendet können Sie hier finden. In unserem Fall ist es Klasse "icon-bookmark" . Dieser Code wird in <div class="post_category">dargestellt.
Jetzt muss man den Code des Originalicons mit Hilfe von CSS neu schreiben. Öffnen Sie die Datei themeXXXXX/style.css in Ihrem Editor (hier XXXXXX ist die Nummer des Themas Ihrer Vorlage).
Es ist nötig den CSS Selektor zu erstellen, der den Code des Originelicons neu schreibt. Kopieren Sie den Namen der notwendigen Klasse. Sie können sie finden, indem Sie Firebug nutzen. In diesem Beispiel ist es post_category.
Fügen Sie den Klassennamen in die CSS Datei ein und fügen Sie das Symbol . (Punkt) hinzu, um den CSS Selektor zu erstellen.
Kopieren Sie den Code des Icons. Ihn können Sie mit Hilfe von Firebug finden.
Fügen Sie den Code in die Datei .css ein. Ihr CSS Selektor muss wie auf dem Bildschirmfoto aussehen:
Jetzt sollen Sie den Code des Icons in der Datei style.css spezifizieren. In Firebug sehen wir den Link zur externen Datei CSS. Diese Datei wird mit den Icons Font awesome verwendet.

Achtung: r=3.2.1 bedeutet, dass in der Vorlage Font awesome Icons der Version 3.2.1 benutzt werden. Überzeugen Sie sich, dass Sie die Cods für die Icons aus der korrekten Schriftversion angeben. Wenn es nicht so, werden sie dann auf der Webseite nicht angezeigt.
Sie können die Suchmaschine verwenden, um die Liste von Font Awesome Icons der passenden Version zu finden. Nutzen Sie die folgenden Schlüsselwörter:
font awesome 3.2.1 cheatsheet. Achten Sie, bitte, darauf, dass 3.2.1 die Version der Font awesome Icons (in unserer Vorlage kann diese Version anders sein) ist. Öffnen Sie den Link für “font Awesome 3.2.1 Cheatsheet”.
Hier sehen Sie die Liste von Icons und ihre Codes. Lassen Sie uns unser Icon durch icon-warning-sign ersetzen. Kopieren Sie den Code dieses Icons. Er muss wie f071aussehen.
Fügen Sie diesen Code in Ihre CSS Regel mit dem Backslash am Anfang ein. Fügen Sie !important hinzu, um sich zu überzeugen, dass die originalen Stile neu geschrieben werden. In unserem Fall sieht der Code wie auf dem Bildschirmfoto:
Speichern Sie die Änderungen und laden Sie die bearbeitete Datei auf den Server hoch. Aktualisieren Sie die Seite, um die vorgenommenen Änderungen zu sehen.
Wie Sie sehen können, wurde die Regel für das Originalicon in der Datei style.css neu geschrieben. Nehmen Sie, bitte, solche Änderungen für andere Icons auch vor.