Wir zeigen einen Lösungsansatz, wie man im Header-Button ein Icon einfügen kann ohne grosse Programmierkenntnisse und ohne Plugin. Wir zeigen die Lösungsschritte anhand des Astra Themes (Pro Version). Die Customizer von WordPress Themes sind aber oft ähnlich aufgebaut und weisen parallele Funktionen auf.
Header-Einstellung im Customizer
Im Customizer vom Astra Theme kann unter Header » Primäres Menü als letztes Element u.a. ein Button eingefügt werden. Dieser Button kann sehr nützlich sein, beispielsweise um einen Login-Bereich oder den Kontakt hervorzuheben.
Wenn auf einer Website ein Kundenbereich vorhanden, wird oftmals mit einem kleinen User-Icon darauf hingewiesen. Icons lassen sich aber standardmässig nicht im Buttontext einfügen. Um einen zu kreieren, der gleichzeitig Text und ein Icon enthält, muss man zu weiteren Mitteln greifen. Wir lösen das Problem auf eine einfache Art mit CSS (Cascading Style Sheet).
CSS im Theme-Editor
Um ein Icon im Header-Button anzuzeigen, greifen wir auf CSS zurück und bearbeiten das Stylesheet im Theme-Editor (den Theme-Editor erreicht man in WordPress unter dem Menüpunkt Design). Es wird jeweils empfohlen nicht direkt im Stylesheet des Original-Themes zu manipulieren, sondern zuerst ein Child-Theme zu erstellen. Bei einem allfälligen Update des Themes gehen so keine Code-Zeilen verloren. Das Astra-Theme bietet auch einen eingebauten Theme-Editor im Customizer (Zusätzliche CSS).
Im Stylesheet (vorzugsweise des Child-Themes) können nun folgende Code-Zeilen eingefügt werden:
/* Header Button -------------------------------------- */
.ast-custom-button:before {
content: "";
background: url("https://digitalcreators.ch/wp-content/uploads/user-solid.svg") no-repeat;
width: 20px;
height: 20px;
float:left;
vertical-align:center;
margin: 5px 6px 0px 0px;
}Mit .ast-custom-button wird der Header-Button des Astra-Themes angesteuert. Um ein Icon vor dem Buttontext einzufügen muss man erst eine Icon-Datei hochladen, beispielsweise eine skalierbare Vektorgrafik (.svg). Mit .ast-custom-button:before kann das hochgeladene Icon vor den Button-Text gesetzt werden.
