Home » Wissensdatenbank » Icon im Header-Button einfügen

Icon in Header-Button auf WordPress einfügen

Wissen teilen

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.

Im Customizer einen Button als letztes Element wählen (Astra)

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).

Ein User-Icon neben dem Schriftzug

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.

War dieser Artikel hilfreich?

Scroll to Top