WordPress. Wie man Icons «Material design» ändert

Von diesem Tutorial erfahren Sie, wie man Icons «Material design» in WordPress Vorlagen ändert.

WordPress. Wie man Icons «Material design» ändert

Material Design ist kompletter Satz von Icons für leicht skalierbare Vektorgrafiken auf der Website. Er wird für einige WordPress Vorlagen, die von TemplateMonster.com erstellt wurden, benutzt. Lassen Sie uns zeigen, wie man diese Icons ändert. Es gibt zwei Möglichkeiten, diese Icons zu ändern:

1. mit Hilfe von Shortcodes;
2. mit Hilfe von CSS.

Lassen Sie uns zwei Möglichkeiten zeigen. Die erste Möglichkeit besteht darin, dass man Icons mit Hilfe von Shortcodes (using shortcodes) ändert.

1. Öffnen Sie das Control Panel WordPress und finden Sie den Tab Seiten > Alle Seiten > Hauptseite (Pages > All pages > Home). Finden Sie die Zeile des Shortcodes, in der das Icon «Material design» sehen:

   

2. Lassen Sie uns jetzt den Dateimanager (File Manager) öffnen und die Datei ‘wp-content/themes/theme####/material/material-design.css’ finden. Öffnen Sie diese Datei, um sich mit ihren Inhalt bekannt zu machen. Hier finden Sie einige Varianten jedes Icons. Finden Sie die CSS Klasse, die unserem Icon entspricht und kopieren Sie seinen Titel aus der Datei:

   

3. Fügen Sie diesen Titel anstatt den Titel standardmäßig in die Zeile des Shortcodes ein und speichern Sie die vorgenommenen Änderungen. Aktualisieren Sie Ihre Website und schauen Sie sich das Ergebnis an. Das neue Icon wird der Website angezeigt.

Die zweite Möglichkeit besteht darin, dass man Icons «Material design» mit Hilfe von CSS (using CSS) ändert.

1. Drücken Sie mit der rechten Maustaste aufs Icon auf der Website und nutzen Sie das Werkzeug ‘Element überprüfen’ (Inspect element), um die Klasse des CSS Icons, das Sie ändern möchten, zu finden. Kopieren Sie die CSS Klasse (Copy the CSS class).

2. Kehren Sie zum Control Panel WordPress zurück und finden Sie den Tab Aussehen > Editor > style.css (Appearance > Editor> style.css). Fügen Sie die Klasse des CSS Icons ein und überzeugen Sie sich, dass es die Eigenschaft ‘content’ hat.

3. Kehren Sie zur Datei ‘wp-content/themes/theme####/material/material-design.css’ zurück und finden Sie den Wert, den Sie anstatt des Wertes ‘content’, der standardmäßig festgelegt wurde, verwenden möchten.

4. Fügen Sie den neuen Eigenschaftswert ‘content’ in die Datei style.css ein. Vergessen Sie nicht ‘!important’ zu nutzen, damit die geänderte CSS Regel korrekt funktionieren kann. Im Ergebnis wird die CSS Regel so aussehen:

   .block_3  .service-box2:after {
     content: "\e11d" !important;
     }

5. Speichern Sie die Änderungen, die Sie an der Datei style.css vorgenommen haben. Aktualisieren Sie die Hauptseite, um das Ergebnis zu sehen.

Sie können auch das ausführliche Video-Tutorial nutzen:

WordPress. Wie man Icons «Material design» ändert