Support » Themes » Divi – Fontawsome – Icons – CSS content Attribut

  • Hallo zusammen,

    meinem Verständnis nach kann man zusätzlich zu den 4 im Divi-Theme vorgesehenen Social-Icons (FB, Twitter, Insta, RSS) auch eigene hinzufügen. Ergänzung der social_icons.php durch einen weiteren Listeneintrag mit entsprechender Klasse.

    Problem 1: das allein klappt bei mir nicht. Offenbar ist das zugehörige Style-Sheet nicht eingebunden. Wenn ich nämlich (das aber unter https://comedyforfutrefestival.de) dort in „Custom CSS“ notiere:

    .et-social-youtube a.icon:before { content: '\e0a3'; }

    Wird mir das Youtube-Icon angzeigt.

    So wie ich es mittlerweile verstehe, wird der Liste dort irgendwie die oder „eine“ „fa-brands.svg“ zugeordnet und der Hex-Code im Content referenziert eines der „Glypt“-Elemente dort.

    Problem 2.: LinkedIn erwische ich dort nicht.

    Komisch dabei: in der Vorschau wird es mir korrekt angezeigt ;-).

    .et-social-linkedin a.icon:before { content: '\e09d'; }

    Das führte dazu, dass Chrome, Opera und Firefox jeweils an anderes Logo angzeigt haben 😉

    Als Workarround habe ich mir jetzt die SVGs von Xing und LinkedIn in den Ordner Uploads gepackt, diese auf 20px Höhe geändert und dann eingebunden mit Custom-CSS:

    .et-social-linkedin a.icon:before {
    content: url(https://nu17.de/wp-content/uploads/2022/02/linkedin-icon-1.svg);
    }
    .et-social-xing a.icon:before {
    content: url(https://nu17.de/wp-content/uploads/2022/02/xing-logo-svgrepo-com.svg);
    }

    Fragen tue ich mich, wie ich herausbekomme, welches SVG von Font-Awsome eingebunden wird, wie ich da die gewünschten Logos direkt draus ziehen kann und/oder wie ich herausbekomme, welche Höhe die Font-Awsome-Logos in der Fußzeile haben, damit ich weiß, ob ich mit den 20px richtig liege 😉

    Dank und Gruß,

    Robert aka dudada

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Bei Fragen zu gekauften Themes (hier: Divi) können wir dir nicht weiterhelfen, weil sie uns für einen kostenlosen Support nicht kostenlos zur Verfügung stehen.

    Bitte wende dich bei Fragen zu diesem Theme an die Entwickler.

    Die Icons zu Facebook, Twitter, LinkedIn und Xing werden mir in der Fußzeile angezeigt. Hast du mal den Browser-Cache geleert?

    Die Ladezeiten der Website sind so noch nich akzetabel:

    74 Anfragen
    20,14 MB / 19,44 MB übertragen
    Beendet: 21,95 s
    DOMContentLoaded: 4,61 s
    load: 35,01 s
    Thread-Starter dudada

    (@dudada)

    Vielen Dank @pixolin – sorry, das wusste ich nicht, dass Divi ein Kauf-Theme ist. Vermutlich über Designer-Inn und/oder von der Grafikerin genutzt. Die Problematik schien mir allemeiner Natur, zumindest dachte ich, dass Font-Awsome zumindest zum Teil frei ist/wäre.

    Die Icons zu Facebook und Twitter kommen von Divi-Theme aus Font-Awsome. Linked-In und Xing habe ich mit o.g. Workarround durch Einbindung der entsprechenden SVGs und content url(linkzum.svg) eingebaut und im SVG selbst eine Größe von 20px festgelegt. Was ich mal nicht so „nice“ fand, im SVG rumzufuhrwerken.

    Die Ladezeit, ja, das ist wohl der Nachteil eines solchen Divi-Themes, oder lässt sich da „was machen“? Womit hast Du das gecheckt? FF-Webdeveloper-Tools? Danke dafür mal extra 😉

    Dank und Gruß,

    Robert aka dudada

    • Diese Antwort wurde geändert vor 9 Monaten, 3 Wochen von dudada.
    • Diese Antwort wurde geändert vor 9 Monaten, 3 Wochen von dudada.
    • Diese Antwort wurde geändert vor 9 Monaten, 3 Wochen von dudada.
    • Diese Antwort wurde geändert vor 9 Monaten, 3 Wochen von dudada.
    • Diese Antwort wurde geändert vor 9 Monaten, 3 Wochen von dudada.
    • Diese Antwort wurde geändert vor 9 Monaten, 3 Wochen von dudada.
    • Diese Antwort wurde geändert vor 9 Monaten, 3 Wochen von dudada.
    Thread-Starter dudada

    (@dudada)

    Sorry, hatte wohl zu viel korrigiert im Nachhinein. Hatte Schreibfehler entdeckt und wollte die Formatierung aufhübschen. Jetzt wird der Beitrag zurückgehalten, bis ein Moderator ihn freischaltet.

    Thread-Starter dudada

    (@dudada)

    Vielen Dank @pixolin – sorry, das wusste ich nicht, dass Divi ein Kauf-Theme ist. Vermutlich über Designer-Inn und/oder von der Grafikerin genutzt. Die Problematik schien mir allgemeiner Natur, zumindest dachte ich, dass Font-Awsome zumindest zum Teil frei ist/wäre.

    Die Icons zu Facebook und Twitter kommen von Divi-Theme aus Font-Awsome. Linked-In und Xing habe ich mit o.g. Workarround durch Einbindung der entsprechenden SVGs und content url(linkzum.svg) eingebaut und im SVG selbst eine Größe von 20px festgelegt. Was ich mal nicht so „nice“ fand, im SVG rumzufuhrwerken.

    Die Ladezeit, ja, das ist wohl der Nachteil eines solchen Divi-Themes, oder lässt sich da „was machen“? Womit hast Du das gecheckt? FF-Webdeveloper-Tools? Danke dafür mal extra ??

    Dank und Gruß,

    Robert aka dudada

    Die Problematik schien mir allemeiner Natur, zumindest dachte ich, dass Font-Awsome zumindest zum Teil frei ist/wäre.

    Wieso Font-Awesome? Das Theme verwendet den Elegant Icon Font. Auf der Webseite des Fonts siehst du auch eine Übersicht der Icons mit ihrem jeweiligen Unicode zur Einbindung. Zu xing scheint es aber kein Icon zu geben.

    Was ich mal nicht so „nice“ fand, im SVG rumzufuhrwerken.

    … verstehe ich nicht. Du kannst ein svg- oder auch png-Icon hochladen (spielt bei der Größe wahrscheinlich keine so große Rolle) und per CSS einbinden.

    .et-social-xing a.icon::before {
      content: url(https://n***7.de/wp-content/uploads/2022/02/xing.png);
    }

    Wenn du eine beliebige svg-Datei verwenden möchtest und die Größe nach deinen Bedürfnissen anpassen möchtest, kannst du auch mit einem Background-Image arbeiten, sinngemäß sowas wie

    .et-social-xing a.icon::before {
      background-image: url('/images/pdf.png');
      background-size: 10px 20px;
      display: inline-block;
      width: 10px; 
      height: 20px;
      content:"";}

    Die Ladezeit, ja, das ist wohl _der_ Nachteil eines solchen Divi-Themes,

    Multipurpose-Themes gelten oft als Performance-Bremse, weil die ganzen Einstellungsoptionen erst einmal abgerufen und aufbereitet werden müssen, um daraus dynamisch eine Website zu generieren. Das lässt sich mit einem Cache-Plugin wie z.B. Surge etwas abfangen, schützt aber nicht davor unsinnig große Bilder oder Videos hochzuladen.

    Wenn ich mir Websites anschaue, verwende ich gerne die Entwickler-Tools des Browsers. Im Tab Netzwerk erhalte ich eine Übersicht aller geladenen Dateien und ihrer Größe, im Tab Inspektor kann ich mir ansehen, wie die Elemente eingebunden werden und welche Größe per CSS vorgegeben wird.
    Dein Portraitfoto ist mit einer Auflösung von 1600 x 1600 Pixeln eingebunden, wird dann aber (abhängig von der Displaygröße) gerade mal mit 320 x 320 Pixeln angezeigt. Dafür eine Datei mit einem Volumen von 2 Megabyte einzubinden ist … wenig hilfreich. Die Bandbreite ist zwar inzwischen selbst bei Nutzung eines Smartphone in der Eifel besser beworden, aber 2MB nur für ein einziges Bild(chen – 320px!) ist einfach unvernünftig. Wieso als animierter Hintergrund (!) ein Video alle-farben-langsam.mp4 mit satten 1,5MB gleich fünfmal eingebunden wird, verstehe ich auch nicht. Hier ist wahrscheinlich einfach unkundig oder schlampig oder schnell und billig gearbeitet worden. Und so lässt sich die Liste der Fehler fortschreiben, sodaß ich in diesem Fall nicht unbedingt das Theme für die schlechte* Performance verantwortlich machen möchte.

    (* wir halten uns hier mit der Beurteilung von Webseiten sehr zurück, weil wir die Hintergründe nicht kennen. Als Faustformel wird aber jede Webseite, die länger als 3 Sekunden braucht um Inhalte im sichtbaren Bereich zu laden, als zu langsam bewertet.
    Google Pagespeed gibt für die Webseite verschiedene Empfehlungen ab, wobei nur „Erstreaktionszeit des Servers verringern“ möglicherweise auf die Verwendung eines Multipurpose-Theme zurückzuführen ist.)

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „Divi – Fontawsome – Icons – CSS content Attribut“ ist für neue Antworten geschlossen.