AwesomeFont Icons mit Bild ersetzen

    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?

    • Gerade eben
    • Anzeige

    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

    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

    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.

    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 :(

    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");
}

    2 Mal editiert, zuletzt von b3317133 (12. März 2020 um 01:29)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden