WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Wie erweitert man WordPress mit Font Awesome?

von | Apr 25, 2019 | Allgemein, Interessantes, Mein Youtube Kanal, Youtube | 2 Kommentare

Schlagwörter: Font - Font Awesome - Icon

Jeder Webseitenbetreiber, Blogger oder Shopbetreiber kommt irgendwann mal zu der Einsicht, dass der eigene Webauftritt langweilig ist und man ihn noch aufpimpen könnte. Jetzt könnte man natürlich ein komplettes ReDesign machen oder man nimmt das was man bereits hat, und verbessert es.

So oder so, man möchte evtl Icons einbauen und die kann man natürlich als SVG, PNG oder so direkt als Bild / Vektor einbauen oder man greift auf Font Awesome zurück. Font Awesome ist nämlich eine Art Schriftsammlung für Icons.

Damit man diese Icons verwenden kann, muss man natürlich diese Schrift auch noch einbinden und das kann man eigentlich sehr schnell machen.

Man muss nur den folgende Stylesheet Code in das Header.php File reinkopieren und schon ist Font Awesome mit WordPress verbunden.

1
2
3
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
crossorigin="anonymous">

Nur ein kleines Problem gibts jetzt, und zwar telefoniert Font Awesome nun „nach Hause“ und ist somit nicht DSGVO konform. Damit man der DSGVO folgen tut, muss man Font Awesome entweder direkt in WP reinkopieren oder man verwendet ein passendes Plugin dafür.

In diesem Video zeige ich euch alle Möglichkeit wie man Font Awesome schnell einbauen kann (das schafft jetzt jeder).

Übrigens wer keine Lust hat oder keinen Mut besitzt, es selbst zu integrieren, der kann auch mein Gratis Plugin mit dem Name „Quick Font Awesome“ verwenden.





2 Kommentare

  1. Samuel

    Salü Eric

    Ich finde deinen Blog grundsätzlich super. Naja bis auf diesen Beitrag. Du zeigst hier leider eine völlig falsche Variante für das einbinden von CSS Dateien.

    In WordPress sollte man CSS und JS Dateien immer über die Funktion:

    wp_enqueue_style( $handle, $src, $deps, $ver, $media );

    einbinden. Damit verhindert man, dass Stylesheets doppelt geladen werden (falls z.B. in Zukunft ein Plugin installiert wird das FontAwesome mitbringt) wird das CSS nicht doppelt in die Seite geladen.

    Daher CSS direkt in die header.php oder JS Dateien direkt in die footer.php einzubauen – ist nicht der elegante „WordPress – Way“ – auch nicht der offizielle.

    Antworten
    • Eric-Oliver Mächler

      danke für deinen kommentar – wie ich bei dir im blog gesehen habe, beschäftigst du dich seit jahren mit wp. leider sind leute wie du und ich immer noch in der minderheit und darum muss man den leuten dinge so erklären, dass sie auch den mut haben was selbst anzupassen. ich erlebe täglich, dass selbst ein code ins header.php file via editor einzubauen schon viele leute überfordert :).
      btw wenn man mein plugin verwendet, wird genau der enqueue weg gewählt – weil es der sauberste weg ist 🙂
      du siehst also ich muss hier nicht nur profis mit infos versorgen sondern auch die normalos 🙂

      Antworten

Trackbacks/Pingbacks

  1. WordPress Menu mit Font Awesome Icon erweitern - […] Im letzten Video habe ich euch ja bereits gezeigt, wie man Font Awesome mit WordPress verbinden kann (Wie erweitert…

Antworten auf Samuel Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert