keine Fontawesome Icons

    Hallo zusammen, auf einer Seite habe ich ein FloatMenü eingebunden. Das habe ich schon häufiger ohne Probleme getan. Hier fehlen jetzt aufeinmal die Fontawsome Icons. Diese fehlen also grundsätzlich auch wenn ich sie anders einbinden würde. Ich hoste sie lokal und es klappt immer. Vielleicht könnt ihr hier mal schauen wo das Problem liegt?

    https://naturheilpraxis-belm.de

    Danke

    • 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 aktuelle Einbindung von Font Awesome Dateien über das Child Theme ist ein ziemliches Chaos, gleichzeitig minified und nicht minified Dateien usw., zig verschiedene Subsets usw., das sollte man wohl mal gründlich überarbeiten.

    Deaktiviere das Einbinden im Child Theme und schau dann, ob das Plugin selbst Font Awesome korrekt lädt.

    Ok bei anderen Seiten funktioniert es einwandfrei. Die lokal zu hosten ist doch erstmal ok oder hab ich das falsch gemacht ? Wo ist denn genau das Problem?

    Wie man Font Awesome lokal hostet, ist z.B. hier beschrieben, man bindet dafür genau eine Datei ein, die lädt dann den Rest, schau Dir den Inhalt der Datei mal an, vor allem das Ende.

    Code
    <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">


    Das Child Theme auf der genannten Seite bindet alles doppelt und vierfach ein.


    Der Autor des Child Themes ist da offenbar irgendeiner falschen oder sehr unklaren Anleitung gefolgt.

    Funktioniert das Plugin, wenn Du alle Dinge bzgl. Font Awesome im Child Theme abschaltest und zudem auch (falls vorhanden) irgendwelche Optimierungsplugins die Einfluss auf Font Awesome nehmen?

    So habe mal die Funktion aus dem Child rausgenommen. Keine Besserung. Danach es mal mit dem Fontawesome-Kit versucht. Auch nix. Nun mal nur die all.css eingebunden. Nix.
    Irgendwie werden da wohl vom Theme noch die 4.7 geladen kann das sein?

    Das Parent Theme lädt jetzt die Font Awesome Version 4.7:

    Code
    <link rel='stylesheet' id='font-awesome-css'  href='.../wp-content/themes/langwitch/design/css/libs/font-awesome.css' type='text/css' media='all' />


    Der HTML-Code im Plugin Icon passt nicht dazu:

    Code
    derzeit: <i class="fas fa-envelope-open"></i>
für 4.7: <i class="fa fa-envelope-open"></i>


    Weiterhin wird die [FONT=Courier New]font-family[/FONT] für alles per CSS vom Child Theme mit [FONT=Courier New]!important[/FONT] überlagert:

    CSS
    html, body, div, span, ... mmary, time, mark, audio, video {
    font-family: 'Raleway' !important;
}


    Das [FONT=Courier New]!important[/FONT] da müsste weg oder alternativ im Child Theme CSS wiederum überlagert werden:

    CSS
    .fa {
    font-family: FontAwesome !important;
}


    Alternativ beim Theme Hersteller nachfragen, ob es auch eine Theme Version mit Font Awesome 5 gibt.

    Ausserdem werden derzeit noch alte unnötige Preloads im [FONT=Courier New]<head>[/FONT] vom Child Theme ausgegeben:

    Code
    <!--  Fontawesome  -->
    <link rel="preload" as="font" type="font/woff2" href=".../wp-content/themes/webasmedia-child/fontawesome/webfonts/fa-brands-400.woff2" crossorigin="anonymous" />
   usw.

    Hey, ok kann ich denn die Fontawesome aus dem Parent Theme irgendwie entfernen? Die will ich ja nicht mehr weil ich lokal die aktuellste Version nehme.

    1. Ich habe erstmal das important aus der style.css im Child entfernt.
    2. Warum sind die Preloads unnötig? Die nutze ich ja von meinen lokalen Fontawesome

    LG

    Wenn die falschen Einbindungen im Child Theme entfernt werden, sind die zugehörigen Preloads überflüssig. Sie sind generell auch überflüssig bzw. in Deinem Fall sogar kontraproduktiv, denn der Browser holt sich normalerweise anhand Angaben in [FONT=Courier New]@font-face[/FONT] nur das für ihn passende Format, mit den aktuellen Preloads lädt er extra unnötige Formate.

    Wenn Du unbedingt eigenes Font Awesome verwenden willst, wende Dich an den Autor des Child Themes und zeige dem den o.g. Link in #4 bzgl. korrekter Einbindung. Der Autor wird dann auch im Code des Parent Themes sehen können, wie man die 4.7 Version per [FONT=Courier New]wp_dequeue_script()[/FONT] entfernen kann, falls sie im sonstigen Parent Theme nirgends verwendet werden sollte.

    Die saubere Lösung wäre hier, Font Awesome 4.7 aus dem Parent Theme wie dort vorgesehen zu verwenden und den HTML-Code Deines Floatmenüs darauf anzupassen,siehe HTML-Code in #7.

    Habe mal die falschen Einbindungen im Child Theme entfernt. Preloads rausgenommen. Könnte man auch selber irgendwie herausfinden welche Funktion die FontAwesome 4.7 lädt und dieses dann unterbinden in der functions.php?

    Hallo, der support hat sich gemeldet und drauf hingewiesen, dass in einer php-Datei die Fontawesome geladen werden.

    Heisst was? Ich will die da ja nicht einfach rausschmeissen sondern am liebsten im Child deaktivieren damit sie beim nächsten Update nicht wiederkommen.

    LG

    Scripts und Styles des Parent Themes entfernt man im Child Theme mit [FONT=Courier New]wp_dequeue_script()[/FONT] bzw. [FONT=Courier New]wp_dequeue_style()[/FONT].

    Falls das Parent Theme irgendwo Symbole von Font Awesome 4.7 verwendet, werden diese dann natürlich nicht mehr korrekt dargestellt.

    Empfehlung saubere Lösung siehe #9, mit dem Entfernen eines [FONT=Courier New]s[/FONT] beim Icon wärst Du mit dem aktuellen Stand der Seite ohne weitere Änderungen dann auch schon fertig:

    Code
    derzeit: class="fas
für 4.7: class="fa


    5 Mal editiert, zuletzt von b3317133 (19. Januar 2021 um 20:39)

    Ich habe da noch eine weitere Frage. Ich hoste meine Schriftarten auch lokal und binde sie dann über die style.css ein. Aufeinmal wird diese Schriftart aber daraus nicht mehr genommen und ich weiss nicht warum. Könnt ihr mir hier nochmal helfen?

    LG

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden