Trick # 411 | Dieser Beitrag beinhaltet 957 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Das Button-Modul des Divi-Themes bietet die Möglichkeit, neben der Tastenbeschriftung ein Icon anzuzeigen. Dabei kommt jeweils ein Symbolbild aus dem Portfolio der Divi-Icons zum Zug. Doch dieses lässt sich auch mit einem Font-Awesome-Icon ersetzen. Heute zeigen wir Ihnen, ie das geht.
Normalerweise stellt das Button-Modul des Divi-Themes ein Icon aus dem Divi-Portfolio an. Hier ein Beispiel mit einem Papierflieger:
Doch statt der Standardauswahl aus den Divi-Icons sind auch Icons von Font Awesome möglich.
Font Awesome verwenden
Damit der Hack funktioniert, müssen die Font Awesome-Icons auf Ihrer Divi-Website eingebunden sein. Das gestaltet sich aber recht einfach. Wie es geht, lesen Sie im Beitrag «Font-Awesome-Icons einbinden und verwenden».
- Dafür müssen Sie dem Divi-Button erst einmal mitteilen, dass Sie KEIN Icon dargestellt haben möchten – dies, weil Divi selber nur mit den eigenen Icons hantiert. Die Option können Sie im «Design»-Tab unter «Button» ausschalten indem Sie den Schalter bei «Show Button Icon» (bzw. «Zeige Button-Icon») deaktiivieren.
- Wenn Sie schon da sind, sollten Sie dem Button-Modul auch gleich eine CSS-Klasse zuweisen. Das geschieht im «Erweitert-Tab» und «CSS-ID und Klassen». Dort fügen Sie im Textfeld CSS-Klasse eine der folgenden Zeilen ein:
- button-icon-left
- button-icon-right
Je nachdem, freilich, ob das Icon dereinst rechts oder links der Buttonbeschriftung angezeigt werden soll.
Nun kommt einer der folgenden Script-Codes zum Zug. Wählen Sie den für Sie zutreffenden aus und fügen Sie ihn in den <head>-Bereich Ihrer Website ein – im Backend unter Divi/Theme-Optionen/Integration:
Icons links der Button-Beschriftung
<script>
jQuery(document).ready(function () {
jQuery(".button-icon-left").append("<span><i class='fas fa-sign-in-alt'></i></span>");
})
</script>Icons rechts der Button-Beschriftung
<script>
jQuery(document).ready(function () {
jQuery(".button-icon-right").append("<span><i class='fas fa-sign-in-alt'></i></span>");
})
</script>Natürlich können Sie in Zeile 3 ein anderes Font-Awesome-Icon unter fontawesome.com/icons auswählen.
Als nächstes benötigen Sie noch ein wenig CSS-Code. Auch hier wählen Sie wieder den passenden aus und fügen ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
Icons links der Button-Beschriftung
.button-icon-left span {
margin-right: 14px;
}Icons rechts der Button-Beschriftung
.button-icon-right span {
margin-left: 14px;
}Der Button von oben präsentiert sich nun so:
… wie erwartet: mit Font-Awesome- statt Divi-Icon.
Werbung
Werbung
