Schwierigkeiten ein bestimmtes Fontawesome-Icon einzubinden

  • Hallo,

    Ich tüftel schon länger bei der Gestaltung eines PlugIns auf meiner Webseite (https://www.heimmieseckzimmer.de) in der Sidebar vor mich hin. Ich möchte das Icon auf dem Button ändern.

    [Blockierte Grafik: https://www.heimmieseckzimmer.de/wp-content/uploads/bilder/ablage/forum/iconproblem.png]

    Ich möchte gerne das Icon "piggy-bank" (f4d3) dort haben und nicht den "shopping-cart" (f07a). Wenn ich das Icon im PlugIn selbst ändere, funktioniert es, aber das ist nicht mein Ziel. Ich möchte nicht zwingend in PlugIns "rumpfuschen", sondern es lieber per CSS machen. Andere Icons, wie z.B. das Herz oder PayPal funktionieren auch. Ich habe gelesen, das unterschiedliche Fontawesome-Versionen daran Schuld sein könnten. Ich habe nun die neuste Version per FTP in mein Childtheme hochgeladen und einen Verweis im Header gemacht. Die ältere Version vom Parenttheme habe ich erstmal rausgenommen. Icons, die nicht mehr richtig angezeigt wurden, z.B. die Sprechblasen für die Kommentare, per CSS angepasst.

    Ich komme mit meinem (auch nachgelesen) Wissen nicht mehr weiter und bin kurz vorm Aufgeben. Vielleicht habe ich auch schon zu viel rumgewerkelt und irgendwo haben sich (Tipp-)Fehler eingeschlichen, die ich nicht mehr finde. Kann mir vielleicht jemand dabei helfen/ drüberschauen?

    Liebe Grüße, Nina

    • 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

  • Entferne das aus der Datei [FONT=Courier New]style.css[/FONT] Deines Child-Themes:

    Code
    .fa.fa-shopping-cart::before {
        display: inline-block;
        font: normal 14px/1 Fontawesome;
        content: "\f4d3";
    }

    Schreibe nur das dafür rein:

    Code
    .tiny_coffee .fa.fa-shopping-cart::before {
        content: "\f4d3";
    }

    Die korrekte [FONT=Courier New]font-family[/FONT] heisst bei Dir auf der Seite derzeit [FONT=Courier New]"Font Awesome 5 Free"[/FONT] und ist bereits gesetzt. Und die neue Regel begrenzt die Änderung auf das Widget.

    Weiterhin sollte man aus den derzeit mind. vier(!) Einbindungen von Font Awesome wohl über diverse Plugins usw. alle überflüssigen rauswerfen / deaktivieren...

    Code
    <link rel='stylesheet' id='font-awesome-css'  href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css?ver=5.2.2' type='text/css' media='all' />
    
    
    <link rel='stylesheet' id='sb-font-awesome-css'  href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
    
    
    <link rel='stylesheet' id='stcr-font-awesome-css'  href='https://www...[snip]...de/wp-content/plugins/subscribe-to-comments-reloaded/includes/css/font-awesome.min.css?ver=5.2.2' type='text/css' media='all' />
    
    
    <link href="https://www...[snip]...de/wp-content/themes/nucleare-child/theme-child/fontawesome/css/all.min.css" rel="stylesheet">

    6 Mal editiert, zuletzt von b3317133 (11. Juli 2019 um 12:55)

  • Vielen, vielen Dank. Das Icon ist endlich da. Mir fällt da so ein großer Stein vom Herzen.

    Ja, ich habe im Quelltext schon gesehen, dass es mehrere gibt. Mein nächstes Problem ist, wie finde ich die und wo entferne ich die? Wenn ich die über FTP bei den PlugIns rausnehme, dann sind sie doch beim nächsten Update des PlugIns wieder da, oder?

    Letzteren Verweis habe ich selbst eingefügt, um auf die downgeloadetet Version auf meinem Server hinzuweisen. Nehme ich den raus, verschwindet das Icon "piggy-bank" wieder.


  • Ja, ich habe im Quelltext schon gesehen, dass es mehrere gibt. Mein nächstes Problem ist, wie finde ich die und wo entferne ich die? Wenn ich die über FTP bei den PlugIns rausnehme, dann sind sie doch beim nächsten Update des PlugIns wieder da, oder?

    Letzteren Verweis habe ich selbst eingefügt, um auf die downgeloadetet Version auf meinem Server hinzuweisen. Nehme ich den raus, verschwindet das Icon "piggy-bank" wieder.


    https://codex.wordpress.org/Function_Refer…p_dequeue_style

    Code
    function dequeue_font-awesome_css() {
      wp_dequeue_style('font-awesome-css');
      wp_deregister_style('font-awesome-css');
    // usw 
    
    
    }
    add_action('wp_enqueue_scripts','dequeue_font-awesome_css',100);


    Letzteren Verweis habe ich selbst eingefügt, um auf die downgeloadetet Version auf meinem Server hinzuweisen. Nehme ich den raus, verschwindet das Icon "piggy-bank" wieder.

    diese Version sollte man dann halt nicht löschen

    Mit offenen Augen träumen

Jetzt mitmachen!

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