User Rating: 0 / 5

Das ICON Library von Font Awesome wird regelmäßig überarbeitet und leider wurde ab Version 5 vieles stark geändert und so gibt es für Joomla kein Update für Ganrty 5, Community Builder oder Kunena oder Erweiterungen wie NS FontAwesome, die eine aktuelle Version unterstützen. So entschloss ich mich die Bibliothek von Gantry 5 zu erweitern.

Das Partikel

Um Gantry 5 auch mit der neune Version von Gantry 5 verwenden zu können habe ich diesen Partikel (Download nach erfolgreichem Test verfügbar) geschrieben, in dem man zusätzlich den Shim aktivieren kann, damit auch die alten Icons richtig dargestellt werden, denn es wurden einige Icon geändert.

Wichtig ist es die Font Awesome 4 Einbindung von Gantry 5

Updaten der Templates

Wer keinen Shim verwenden will, kann Template Overrides machen und die Icons einfach auf die neue Version umändern. (mehr Information werde ich später in einem eigenen Artikel ergänzen)

Updaten der CSS Dateien

Wenn Icon mittels content: "\f052"; eingebunden sind, so muss man sicherstellen, dass hier die neue Version Font Awesome 5 mittels font-family: "Font Awesome 5 Free"; und font-weight: 900; ergänzt wird.

Dieser Fix wird bei dem Menü von Gantry 5 benötigt, da ansonsten die Pfeile nicht mehr angezeigt werden. Je nach Template variieren die Dateipfade, daher ist es am einfachsten den CSS override zu verwenden:


#g-mobilemenu-container .g-toplevel li.g-parent .g-menu-parent-indicator&:after { font-family: "Font Awesome 5 Free"; font-weight: 900;}

.g-go-back {  a {  &:before {font-family: "Font Awesome 5 Free"; font-weight: 900; } }}

Alte Version

Hier ist noch die alte Version, wie ich es zuvor eingebunden habe, indem ich es einfach umgeschrieben habe. Hierbei wird jedoch bei jedem Update von Gantry wieder alles zurückgesetzt und man muss es neu implementieren. Außerdem zerstörte es den Ico Picker von Ganrty 5.

Die Datei all.min.css ersetze die Datei (umbenennen, oder in der Header Datei umbenennen, siehe weiter unten)

  • /media/gantry5/assets/css/font-awesome.min.css 

und der Ordner

  • /media/gantry5/assets/fonts/*

wird mit dem Ordner webfonts ersetzt (neue Dateien von FontAwesome hochladen).

Leider sind nun viele Icons im Icon-Picker nicht mehr sichtbar, da nun zwischen Fas, Fab,.. unterschieden wird. Jedoch werden die Icon angezeigt, wenn man den richtigen Syntax im Textfeld einträgt, so kann man den Syntax auf der Seite von Font Awesome suchen und hineinkopieren und sieht sofort, ob es funktioniert hat.

Dies ist und meine aktuelle, sehr einfache Lösung, die mir nun alles ermöglicht, das ich brauche.

Aber ich arbeite an einer weiteren Lösung, denn nun muss ich die alte Library dennoch einbinden, sollte ich Communitybuilder oder Kunena verwenden, denn diese benötigen noch die alte Library.

Für das Problem der umbenannten Ico, die nun nicht mehr funktionieren gibt es eine Shim, die man im Header einbauen kann, damit die alten namen auf die neuen Icons verweisen.

dazu muss im Header

media/gantry5/engines/nucleus/templates/page_head.html.twig

bearbeiten und folgendes hinzufügen

<link rel="stylesheet" href="gantry-assets://css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="gantry-assets://css/v4-shims.css" type="text/css"/>

Die neue Datei muss nun auch in den Ordner

/media/gantry5/assets/css/

hochgeladen werden.


Wenn nun alles geändert wurde, dann sollten nach dem löschen des Caches alle Icons richtig angezeigt werden und auch der Ico Picker von Gantry 5 richtig funktionieren.

Internet Quelle 2: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#manually

Der Artikel stellt meine freie Meinung dar und ich habe weder eine Bezahlung noch eine andere Form der Gegenleistung für das erstellen dieses Artikels bekommen.

Ist diese Seite hilfreich?
Dann finde HIER heraus, wie du dieses Projekt unterstützen kannst!
Durch deine Unterstützung kann dieses Projekt erhalten und weiter ausgebaut werden.

Author:

Stefan J. Trucker

Stefan J. Trucker

Seit klein auf beschäftige ich mich mit Technik, Foto & Videographie und Design. Um mein Wissen und meine Erfahrungen festzuhalten dokumentiere ich diese hier auf dieser Seite. Ich bemühe mich die Seite übersichtlich zu gestalten, damit es einfach ist meine Errungenschaften zu teilen. Ich nutzte diese selbst um später später dort ansetzten wo ich aufgehört habe, oder wo mich mein Gedächniss im Stich gelassen hat. So kann jeder von überall auf meine Inhalte zugreifen und schnellstmöglich zum gewünschten Ziel gelangen. Ich bin seit fast 10 Jahren als Ausbilder tätig und habe eine Leidenschaft entwickelt Wissen leicht und übersichtlich aufzubereiten. So hoffe ich mehr zu Motivieren in der Freizeit sich mit tollen hobbies zu beschäftigen und dadurch sein Leben ein stückchen lebenswerter und interessanter zu gestalten. Ich lebe nach dem Motto: Imagine it, Design it, Create it - Just do what you like.

Neue Artikel

Mit dem Onlinetool von Seitenreport.de kann man sich schnell einen groben Überblick über die Qualität eines Webauftrittes verschaffen.
Mit dieser Seite lässt sich sehr gut vergleichen, wie gut man im Verhältniss zur Konkurenz seinen Webauftritt optimiert hat.
MDR-XB80BS
27 Jun Tech
Musik spielt eine große Rolle in meinem Leben, und daher ist es mir wichtig gute Kopfhörer für unterwegs zu besitzen, vor allem beim Sport. Als ich noch sehr viel Skate Scooter fuhr nutze ich einen...
Wir benutzen Cookies
Die Seite Trucker's Projetcs nutzt Cookies. Alle dieser Cookies sind essenziell für den Betrieb der Seite. Extern geladene Inhalte können Tracking Cookies enthalten, um Sie eindeutig zuordnen zu können. Sie können selbst entscheiden, ob Sie nur die Cookies zulassen möchten, die für die Grundfunktion der Seite sind, oder ob Sie alle Cookies erlauben möchten. Bitte beachten Sie, dass bei Ablehnung von nicht Essentiellen Cookies womöglich nicht alle Funktionalitäten der Seite zur Verfügung stehen, zum Beispiel extern geladene Inhalte. Die geladene Googlewerbung, so wie YouTube Videos dürfen keine personenbezogene Daten von den Seitenbesuchern generieren und auswerten.