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
Dann finde HIER heraus, wie du dieses Projekt unterstützen kannst!
Durch deine Unterstützung kann dieses Projekt erhalten und weiter ausgebaut werden.
Author:
