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 Source 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

Joomla
Im Normalfall funktioniert die Installation von Komponenten, Modulen und Plugins problemlos, jedoch kann es immer mal zu unerwartetem kommen. Solltet ihr die Fehlermaldung JFolder::create: Der Pfad...
Joomla
Mittlerweile gibt es keine Seite mehr, die nicht responsive ist, sprich sich an das Display des Endgerätes anpasst um ein optimales Benutzererlebnis zu gewährleisten, nur leider verwenden noch viele...
JGAURORA A5 - 3D Drucker
03 Jul Hardware
Nach langem hin und her habe ich mich nun dazu errungen einen Budget 3D Drucker mit Potential zu erstehen und es handelt sich hierbei um den JGAurora A5 3D Drucker. Die Punkte, die mir ins Auge...
We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.