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

Thema wurde von ff-webdesigner, 14. August 2024 erstellt.

  1. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
    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?
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.671
    Danke erhalten:
    285
    Danke vergeben:
    1.109
    #2 Anonymous, 14. August 2024
    Zuletzt bearbeitet: 14. August 2024
    (Link nur für registrierte Nutzer sichtbar.)
     
  3. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    11. Juli 2021
    Beiträge:
    455
    Danke erhalten:
    215
    Danke vergeben:
    166
    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 :)
     
  4. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.671
    Danke erhalten:
    285
    Danke vergeben:
    1.109
    Habe den Link angepasst, mir ein Rätsel wie das Edit da reingerutscht ist :)
     
  5. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
    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?
     
  6. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    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?
     
  7. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
  8. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    14. Juni 2018
    Beiträge:
    1.671
    Danke erhalten:
    285
    Danke vergeben:
    1.109
    Habe es im Testshop mal mit dem kopierten HTML Code eingefügt, klappt ohne Probleme:
    <i class="fas fa-chevron-right"></i>
     
  9. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
    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.
     
  10. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    upload_2024-8-15_10-48-15.png


    bei mir auf der Seite gehts auch per CSS.
     
  11. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
  12. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    nimm in deinen CSS noch das mit rein:

    Code:
    font-weight: 900;
     
  13. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    16. Oktober 2020
    Beiträge:
    152
    Danke erhalten:
    54
    Danke vergeben:
    37
    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!
     
  14. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
    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...
     
  15. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    16. Oktober 2020
    Beiträge:
    152
    Danke erhalten:
    54
    Danke vergeben:
    37
    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. :)
     
  16. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
    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.
     
  17. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    16. Oktober 2020
    Beiträge:
    152
    Danke erhalten:
    54
    Danke vergeben:
    37
    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
     
  18. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
    meine FA css teile wurden nicht durch updates sondern durch ganz normales cache generieren "falsch" überschrieben.
     
  19. Anonymous
    Anonymous Aktives Mitglied
    Registriert seit:
    31. Juli 2015
    Beiträge:
    41
    Danke erhalten:
    9
    Danke vergeben:
    13
    Kurze Frage, kann es sein, dass die Sachen hier liegen bzw. gecached werden?
    \themes\Malibu\fonts\fontawesome-free
     
  20. ff-webdesigner
    ff-webdesigner Erfahrener Benutzer
    Registriert seit:
    22. Januar 2014
    Beiträge:
    548
    Danke erhalten:
    53
    Danke vergeben:
    60
    nein. alle theme dateien inclusive fonts werden unter /public bzw. ggf. unterordner themes gecached.