Trick # 486 | Dieser Beitrag beinhaltet 555 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Divi-Blurb-Modul (oder Informationstext-Modul) kann mit einem Icon versehen werden. In der Grundausstattung stehen aber nur die Icons aus dem Divi-Portfolio zur Auswahl. Wer da nichts findet, kann sich auch bei Font Awesome gütlich tun.
Setzen Sie ein Blurb- oder Inforamtionstext-Modul an der gewünschten Stelle Ihrer Website ein. Bearbeiten Sie das Modul, wechseln auf den Tab «Erweitert», dort in «CSS-ID & Klassen» und vergeben Sie dem Modul im Textfeld «CSS-Klasse» einen Klassennamen. In unserem Fall etwa «fa-blurb-icon».
Dieser Trick bedingt, dass Ihrer Website die Font-Awesome-Icons bereits bekannt sind. Wie Sie diese einbinden und verwenden, lesen Sie in diesem Beitrag aus der Praxis von Dr. Code.
Nun können Sie auf den Inhalt-Tab wechseln. Aktivieren Sie ein Icon – dabei spielt keine Rolle, welches Sie auswählen, es wird am Schluss ohnehin nicht dieses angezeigt.
Jetzt benötigen Sie ein Stück Code, welches in den <head>-Bereich Ihrer Website gehört. Sie können diesen <head>-Bereich unter Divi/Theme-Optionen/Integration bearbeiten:
<script>
jQuery(document).ready(function(){
jQuery(".fa-blurb-icon .et-pb-icon").remove();
jQuery(".fa-blurb-icon .et_pb_image_wrap").prepend("<span><i class="fa-solid fa-download"></i></span>")
})
</script>Anstelle des Icon-Codes fa-solid fa-download in Zeile 4 verwenden Sie einfach den Code Ihres gewünschten Icons aus dem Font-Awesome-Verzeichnis.
Abschliessend haben Sie noch die Möglichkeit, das Icon etwas zu stylen. Dafür haben wir Ihnen einen Block CSS-Code vorbereitet, den Sie nach Gusto anpassen und im CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) abspeichern können:
.fa-blurb-icon .et_pb_image_wrap {
color: #ffffff;
background: #000000;
padding: 20px;
border-radius: 10px;
font-size: 48px;
}Das entsprechende Informationstext-Modul wird mit diesen Einstellungen Font-Awesome-tauglich.
Übrigens: Wenn Sie dereinst doch lieber ein Divi-Icon verwenden wollen, genügt es, den Klassen-Namen im Tab Erweitert/CSS-ID und Klassen/CSS-Klasse zu entfernen.
Werbung
Werbung
