gelöst Fontawesome-Icons in TABS

Thema wurde von Anonymous, 28. Juni 2022 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    548
    Danke erhalten:
    108
    Danke vergeben:
    32
    Ich hatte danach schon mal gesucht, aber bin nicht fündig geworden. Vielleicht habe ich jetzt mehr Glück:
    Ich suche nach einem Weg in den TABS Icons einzufügen, z.B. für "FAQ", "Downloads" etc.
    Gambio filtert leider alles an HTML aus der Überschrift raus, daher kann man die nicht einfach einfügen.

    Kennt jemand einen Weg das so zu ändern dass man da auch HTML in den Titel einfügen kann?
     
  2. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    937
    Danke erhalten:
    808
    Danke vergeben:
    301
    Muss es zwingend HTML im Titel sein? Man kann da schon einiges mit CSS machen. Statt Font-Awesome-Icons ließen sich auch Hintergrundbilder angeben…

    Code:
    .product-info-description .nav-tabs>li>a::before{
      font-family: 'FontAwesome';
      padding-right: 7px;
    }
    .product-info-description .nav-tabs>li>a[title="FAQ"]::before{
      content: "\f29c";
    }
    .product-info-description .nav-tabs>li>a[title="Downloads"]::before{
      content: "\f019";
    }
    tabs.png
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    548
    Danke erhalten:
    108
    Danke vergeben:
    32
    #3 Anonymous, 28. Juni 2022
    Zuletzt bearbeitet: 28. Juni 2022
    Danke, das ist ja elegant, Du hast es wirklich drauf!

    Nur stimmt da noch etwas nicht bei mir, ich sehe nur Kästchen statt Symbole. Der Font wird wohl nicht geladen bzw. ist nicht vorhanden.

    Im Footer usw. kann ich aber Fontawesome icons verwenden. In den Tabs sehe ich aber nur Quadrate.
     
  4. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    183
    Danke erhalten:
    13
    Danke vergeben:
    51
    @Dominik Späte Kann man das auch auf die Menüleiste anwenden?
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    548
    Danke erhalten:
    108
    Danke vergeben:
    32
    #5 Anonymous, 28. Juni 2022
    Zuletzt bearbeitet: 28. Juni 2022
    Habs gefunden:
    Es muss
    font-family: 'Font Awesome 5 Free';
    heißen... aber dann kommen auch nur ein paar Icons. \f019 z.B. wird nicht angezeigt.

    Irgendwas ist da falsch..
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    548
    Danke erhalten:
    108
    Danke vergeben:
    32
    Jetzt aber:

    Code:
    .product-info-description .nav-tabs>li>a::before{
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      padding-right: 7px;
    }
    .product-info-description .nav-tabs>li>a[title="FAQ"]::before{
      content: "\f059";
    }
    .product-info-description .nav-tabs>li>a[title="Dokumentation"]::before{
      content: "\f019";
    }
    Das font-weight: 900; ist bei mir nötig damit die Icons angezeigt werden.
    Jetzt klappt es! Vielen Dank dafür!
     
  7. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    937
    Danke erhalten:
    808
    Danke vergeben:
    301
    Ja, müsste es eigentlich. Nur damit wurden bei mir nur Kästchen angezeigt. Deshalb hatte ich es in
    FontAwesome geändert :)

    Vor Kategorienamen wie "Einzelkarten"? Ja, macht aber keine große Freude, weil man Gambios Gammel-CSS mühsam umschiffen muss. Nur mal als Beispiel für Desktop:

    Code:
    @media (min-width: 768px){
    nav.navbar-default.navbar-categories>ul.navbar-nav>li>a::before{
      font-family: 'FontAwesome';
      display: inline-block;
      position: absolute;
    }
    nav.navbar-default.navbar-categories>ul.navbar-nav>li>a[title="Einzelkarten"]{
      padding-left: 30px;
    }
    nav.navbar-default.navbar-categories>ul.navbar-nav>li>a[title="Einzelkarten"]::before{
      content: "\f1c5" !important;
      left: 8px;
      top: 20px;
    }
    }
    einzelkarten.png
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Wenn man das direkt im Admin von den Kategorie-Titel, oder vor den Content-Titel (nicht vor den Namen) setzt, wird es ohne extra css auch im Menü angezeigt.
     
  9. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    183
    Danke erhalten:
    13
    Danke vergeben:
    51
    direkt den Font Awesome Code?
    Beispiel:
    Code:
    <i class="fa-solid fa-cards-blank"></i>
     
  10. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    ja. hae ich auch vor der "Startseite"

    upload_2022-6-28_11-41-43.png

    upload_2022-6-28_11-38-50.png

    Das wird bei Kategorien dann auch im Mega-Dropdown angezeigt.

    Siehe hier:
    (Link nur für registrierte Nutzer sichtbar.)
    Die Sterne Bei Grundartikeln und Bändern sind über css eingefügt.
    Die Unterkategorie Sticker -> Stony Sticker hat das Icon gleich im Titel

    Nachtrag: die Farbe des Icons kann man dann immer noch per css ändern
     
  11. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    71
    Danke erhalten:
    14
    Danke vergeben:
    42
    #11 Frankenwald Hanf-Shop, 28. Juni 2022
    Zuletzt bearbeitet: 28. Juni 2022
    Nach der Vorarbeit von Dominik(danke) sollte das bei dir funktionieren.

    Code:
    @media (min-width: 768px){
    nav.navbar-default.navbar-categories>ul.navbar-nav>li>a::before{
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      display: inline-block;
      position: absolute;
    }
    nav.navbar-default.navbar-categories>ul.navbar-nav>li>a[title="Einzelkarten"]{
      padding-left: 30px;
    }
    nav.navbar-default.navbar-categories>ul.navbar-nav>li>a[title="Einzelkarten"]::before{
      content: "\f2c2" !important;
      left: 8px;
      top: 20px;
    }
    }
    Für eine anderen Karte musst du halt was passendes auf https://fontawesome.com/v5/search?m=free suchen und dir oben den Unicode kopieren und bei
    Code:
    content: "\ " !important
    einfügen.

    p.s Falls du mal auf der Suche nach hervorragenden Modulen/Erweiterungen für deinen Shop bist, schau dir www.werbe-markt.de an
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    548
    Danke erhalten:
    108
    Danke vergeben:
    32
    Ich habe das mal getestet, und vor einer Kategorie mal testweise
    <i class="fa-solid fa-cards-blank"></i>
    gesetzt.

    Aber es wird nichts angezeigt bei mir. Bei den Content-Seiten klappt es, aber bei den Kategorien nicht.
    Zumindest nicht ohne css.
     
  13. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Der Shop kann nur FontAwesome 5 Free, Dein Symbol ist aber von FA 6 und ist offenbar auch nicht "Free"
     
  14. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    548
    Danke erhalten:
    108
    Danke vergeben:
    32
    Auch wenn ich ein anderes Icon aus der FA 5 Free Kollektion nehme erscheint nichts. Gambio scheint das auszufiltern, es ist auch im Quellcode nicht zu finden.
     
  15. FRAGO

    FRAGO Erfahrener Benutzer

    Registriert seit:
    5. Dezember 2019
    Beiträge:
    1.013
    Danke erhalten:
    319
    Danke vergeben:
    186
    poste doch mal hier deinen Code... so wie es hier und auch in anderen Beiträgen mehrfach beschreiben wurde funktioniert es...
     
  16. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Versuche es mal mit leeren des Cache in der Reihenfolge:
    Module -> Texte -> Seiten
    Und den vom Browser.
    Wenn Du das Ladezeit-Modul von D. Späte nutzt, musst Du da eventuell auch den Cache leeren.
     
  17. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    548
    Danke erhalten:
    108
    Danke vergeben:
    32
    Habe ich alles schon probiert. Ändere ich den Titel einfach erscheint das auch sofort, packe ich den Fontawsome code für ein Icon rein passiert schlichtweg nichts, es taucht nicht auf.
    Es geht hier um Kategorienamen, also das Feld "Kategorie Name".
     

    Anhänge:

    • gg.jpg
      gg.jpg
      Dateigröße:
      19,3 KB
      Aufrufe:
      15
  18. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Wie genau schreibst Du das in das Feld?
    Und ist es wirklich ein FA 5 Free - Icon?
     
  19. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    71
    Danke erhalten:
    14
    Danke vergeben:
    42
    Diese Variante funktioniert nur mit Kategoriennamen von Kategorien die man über den Content-Manager angelegt hat.

    Icons vor/nach Kategoriennamen für Artikelgruppen kann man so nicht einfügen.
    Dafür muss man die Variante von Dominik verwenden. (SCSS/CSS)
     
  20. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Falsch
    Das geht auch in Kategorien die man unter Artikel / Kategorien erstellt hat.
    in der 4.4x ebenso wie in der 4.5.x und in Oberkategorien wie in Unterkategorien
    Habe gerade in meinem Shop in der letzten KAtegorie "B-Ware" eine Checkbox mit Haken
    <i class="far fa-check-square"></i>
    dahinter gesetzt - wird einwandfrei angezeigt

    und im Testshop ist bei der Unterkategorie Sticker -> Stony Sticker das Häuschen vor dem Titel
    man muss aber den Cache richtig leeren.