Welche Font Awesome 5 Free Icons kann man in Gambio verwenden?

Hallo beisammen,

gibts irgendwo eine doku welche font awesome 5 free icons man in gambio verwenden kann?
\f077 für herz geht.
aber alles andere was ich mit pfeilen testete nicht.
welche icons sind in gambio mit drin? welche nicht?
alternativ: gibts ein cheatsheet für die gm font?

 

(Link nur für registrierte Nutzer sichtbar.)

 

Das sind aber nicht alle, die man bei Gambio verwenden kann. Ich habe mindestens weitere zwei Dutzend Icons in Verwendung, die auf der Seite nicht vorhanden sind, die Du verlinkt hast.

Edit:

Wenn ich das Edit aus dem Filter auf der Seite entferne, kommt das mit der Anzahl hin. Passt also

 

Habe den Link angepasst, mir ein Rätsel wie das Edit da reingerutscht ist

 

Welche Icons in Font Awesome 5 Free drin sind weiss ich. Aber Gambio scheint NICHT alle zu laden. Manche wie Heart werden problemlos angezeigt. Bei anderen erscheint nichts, bei definitiv korrekten /XXXX codes. Gambio scheint hier nur bestimmte Icons zu laden. Welche?

 

Vielleicht hast du die mit "pro" gekennzeichnet sind versucht.
Von den Freien habe ich gerade einige (auch Pfeile) getestet und sie funktionieren.
Kannst du ein Beispiel nennen?

 

Hi Michaela,

habe nur Free Icons versucht einzubauen.
https://fontawesome.com/v5/icons/chevron-right?f=classic&s=solid
Check mal, mobil simulieren:
https://www.perlenklassiker.de/de/Armbaender-FARW795-B.html
Die neuen Pagination Links oben auf der rechten Seite sind Fontawesome.
Heart Button links oben für "zurück" geht. \f004
Chevron-right für "weiter" rechts oben geht NICHT, code \f054

 

Habe es im Testshop mal mit dem kopierten HTML Code eingefügt, klappt ohne Probleme:
<i class="fas fa-chevron-right"></i>

 

hmmm...ich versuche das rein mit css ohne modulanpassungen.

.page-product-info #product_navigation.panel-pagination .pagination>li.back:before{position:absolute; right:30px;display:block;font-family:"Font Awesome 5 Free"; content: "\f004";width:24px; height:24px; border: 1px solid #000;

läuft.

.page-product-info #product_navigation.panel-pagination .pagination>li.next:before{position:absolute;right:0;display:block;font-family:"Font Awesome 5 Free"; content: "\f054";width:24px; height:24px; border: 1px solid #000; border-radius:12px;font-size:16px}

läuft nicht...ich sehe keinerlei Grund hierfür...

ok mit <i class="fas fa-chevron-right"></i> gehts. dann halt so.

 

bei mir auf der Seite gehts auch per CSS.

 

sehr komisch...nun denn wenns mit methode a nicht geht dann halt b. DANKE!

 

nimm in deinen CSS noch das mit rein:

Code:

font-weight: 900;

 

Huhu,

ich habe Fork Awesome und habe diese Lokal eingebunden wegen US EU Datentransfer

Schritt 1: Fork Awesome herunterladen

1. Gehe auf die offizielle Seite von (Link nur für registrierte Nutzer sichtbar.).
2. Klicke auf den Download-Link und speichere die ZIP-Datei auf deinem Computer.

Schritt 2: Dateien entpacken

1. Entpacke die heruntergeladene ZIP-Datei.
2. Es sollte eine Verzeichnisstruktur wie diese entstehen:
   perl
   fork-awesome/
   ├── css/
   │ ├── fork-awesome.css
   │ └── fork-awesome.min.css
   ├── webfonts/
   │ ├── forkawesome-webfont.eot
   │ ├── forkawesome-webfont.svg
   │ ├── forkawesome-webfont.ttf
   │ ├── forkawesome-webfont.woff
   │ └── forkawesome-webfont.woff2
   

Schritt 3: Dateien auf deinen Server hochladen

1. Erstelle einen Ordner auf deinem Webserver, z. B. /assets/icons/.
2. Lade die folgenden Ordner aus dem entpackten ZIP hoch:
   • css/: Enthält die Stylesheets.
   • webfonts/: Enthält die Schriftarten.
   Nach dem Hochladen sollte die Verzeichnisstruktur auf deinem Server so aussehen:
   bash
   /assets/icons/css/fork-awesome.min.css
   /assets/icons/webfonts/forkawesome-webfont.woff2
   /assets/icons/webfonts/forkawesome-webfont.woff
   /assets/icons/webfonts/forkawesome-webfont.ttf
   

Schritt 4: CSS-Datei in deine HTML-Datei einbinden

1. Öffne die HTML-Datei, in der du die Icons verwenden möchtest.
2. Füge die folgende Zeile in den <head>-Bereich ein, um die CSS-Datei zu laden:
   
   HTML:

   <link rel="stylesheet" href="/assets/icons/css/fork-awesome.min.css">

Schritt 5: Icons verwenden

1. Verwende die Icons in deinem HTML-Code mit den <i>-Tags und den entsprechenden Klassen.
2. Beispiel:
   <i class="fa fa-home"></i> Startseite
   
   Hier sind ein paar weitere Beispiele:
   • Haus: <i class="fa fa-home"></i>
   • Benutzer: <i class="fa fa-user"></i>
   • E-Mail: <i class="fa fa-envelope"></i>

Eine vollständige Liste der Icons findest du auf der Fork Awesome Icon-Seite.

Schritt 6: Browser testen

1. Speichere die HTML-Datei und lade sie in deinem Browser.
2. Das Icon sollte sichtbar sein.

Problemlösungen bei Fehlern

1. Icon wird nicht angezeigt:
   
   • Überprüfe den Pfad zur CSS-Datei (fork-awesome.min.css).
   • Kontrolliere, ob der Ordner webfonts/ korrekt auf dem Server liegt.
2. CSS-Datei wird nicht geladen:
   
   • Öffne die Browser-Konsole (F12 > Netzwerk > CSS), um sicherzustellen, dass die Datei ohne Fehler geladen wird.
3. Webfonts fehlen:
   
   • Überprüfe, ob die Dateien aus dem Ordner webfonts/ vollständig hochgeladen wurden.
   • Stelle sicher, dass der Ordner webfonts/ im selben Verzeichnis wie die CSS-Datei liegt.

Testcode: Minimalbeispiel
Um sicherzustellen, dass alles korrekt funktioniert, teste diesen Code in einer HTML-Datei:

HTML:

<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fork Awesome Test</title>
  <link rel="stylesheet" href="/assets/icons/css/fork-awesome.min.css">
</head>
<body>
  <h1>Test: Fork Awesome</h1>
  <i class="fa fa-home" style="font-size: 24px; color: blue;"></i> Startseite
</body>
</html>

Speichere die Datei und öffne sie im Browser. Wenn das Haus-Icon (fa-home) angezeigt wird, ist alles richtig eingerichtet!

 

gute idee und sehr genaue anleitung. aber vorher hätte ich mal gecheckt: bin mir recht sicher dass gambio schon seit jahren fontawesome (genau wie die im style edit angegebenen google webfonts) nur einmal zum cache erstellen von CDN runterlädt und dann lokal ausliefert. scheint laut einer netzwerkanalyse so zu sein...

 

Moin, vielen Dank für den Hinweis!

Ja, das hatte ich auch schon mal gesehen und sogar danach gesucht. Leider funktionieren bei mir die meisten Symbole nicht – es wird oft nur eine kleine Hand angezeigt. Es könnte eventuell daran liegen, dass die verwendete Version von Font Awesome veraltet ist.

Deshalb habe ich die Funktion so implementiert, wie in der Anleitung beschrieben.

 

denk nicht dass da daran liegt. erstens: ich hatte selbst in einenm gambio shop gerade das problem das seitens gambio>FA die icons zwar geladen wurden - aber nicht angezeigt. erster check: font-weight checken. viee icons gehen nur in 700 oder 900 - mache auch mit weniger. zweitens überschrieb bei mir gambio cache css mehrfach falsch, da wurden immer wieder meine ::before fontawesome content codes gelöscht.

 

Moin, danke für die Rückmeldung!

Das klingt nach einer spannenden Fehlerquelle.
Ich werde definitiv mal den font-weight prüfen, ob da vielleicht ein Problem vorliegt.
Ich nutze auf jeden Fall meine eigene Variante, und die funktioniert bisher sehr gut. Den Einbindecode habe ich nicht mehr in der CSS, sondern direkt als Meta-Abruf erstellt. Ich habe ihn also direkt in den Einstellungen unter Meta platziert.

Bezüglich der Überschreibung durch Updates: Soweit ich weiß, gibt es doch eigene GX-Module, die updatesicher sein sollten. Bei mir hat das bisher auch über mehrere Updates hinweg gut funktioniert. Wenn ich das jetzt richtig rausgelesen habe bei dir.
Grüße

 

meine FA css teile wurden nicht durch updates sondern durch ganz normales cache generieren "falsch" überschrieben.

 

Kurze Frage, kann es sein, dass die Sachen hier liegen bzw. gecached werden?
\themes\Malibu\fonts\fontawesome-free

 

nein. alle theme dateien inclusive fonts werden unter /public bzw. ggf. unterordner themes gecached.