AwesomeFont Icons mit Bild ersetzen

travelsandradaniel

Hallo zusammen,

wir möchten auf der Seite beauty-atelier-byjasmin.de unter Leistungen & Preise die Icons mit einem vorhandenen Bild ersetzen.

Ich habe dazu schon eine Anleitung gefunden für die style.css
Das hat allerdings nur dazu geführt, dass das Bild neben den Icons angezeigt wurde. Die Icons wurden nicht ersetzt.

Ist das irgendwie machbar?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Henk1060

die können auch nicht ersetzt werden wenn die icons so aufgerufen werden.

Code

<i class="fa fa-eercast"

am besten selbst mit html deine icon class erstellen und dann über die css aufrufen

travelsandradaniel

Ich bin da leider absolut kein Fachmann. Kannst du oder jemand aus dem Forum erklären was genau dann zu tun ist? Mit html und CSS kenne ich mich leider nicht aus :\

b3317133

Den divs mit Klasse serviceIcon ein Background Image und passende Grösse geben, das i Tag darin ausblenden.

Du wirst um etwas Beschäftigung mit CSS bei solchen Änderungen wohl nicht herumkommen, alternativ wende Dich an die Person, die den Website erstellt hat.

travelsandradaniel

Also ich habe jetzt folgendes unter zusätzliches CSS eingefügt:

CSS

.serviceIcon {
display: none;
}


.serviceIcon:before {
content: url("https://beauty-atelier-byjasmin.de/wp-content/uploads/2020/03/Logo-klein-1-e1583970562102.png") !important;
}

Nehme ich den oberen Code weg, habe ich sowohl das Bild als auch das Icon.
Das Icon weg zu nehmen bekomme ich einfach nicht hin :(

b3317133

Den divs mit Klasse serviceIcon ein Background Image und passende Grösse geben,

Code

.serviceIcon {
    background-image: url("https://beauty-atelier-byjasmin.de/wp-content/uploads/2020/03/Logo-klein-1-e1583970562102.png");
    background-size: 70px;
    width: 70px;
    height: 70px;
}

das i Tag darin ausblenden.

Code

.serviceIcon i {
    display: none;
}

Ergänzung: Für verschiedene Bilder dann z.B. so den Bildlink im zweiten Punkt überschreiben

Code

.singleService:nth-child(2) .serviceIcon {
    background-image: url("https://beauty-atelier-byjasmin.de/wp-content/uploads/2020/03/Footer2.jpg");
}

travelsandradaniel

Ach cool vielen vielen Dank!

So weit weg war ich ja dann gar nicht mehr vom Ziel. :)

Danke dir für deine Hilfe.

b3317133

Nunja, Deine Variante war zumindest auch CSS... ;)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

AwesomeFont Icons mit Bild ersetzen

Jetzt mitmachen!