Modul Schicke Icons im Shop einfach darstellen

Thema wurde von Kai Schoelzke, 22. Dezember 2015 erstellt.

  1. Kai Schoelzke

    Kai Schoelzke Beta-Held

    Registriert seit:
    30. März 2016
    Beiträge:
    3.807
    Danke erhalten:
    548
    Danke vergeben:
    249
    #1 Kai Schoelzke, 22. Dezember 2015
    Zuletzt von einem Moderator bearbeitet: 23. Dezember 2015
    Viele von Euch wollten doch bestimmt schon mal in Ihrem Shop, egal ob in Kategorien, Produkten oder im Content Manager mit Icons arbeiten.

    Es werden keine Original Dateien überschrieben, das ganze ist Updatesicher und funktioniert mit allen Shop Versionen ab 2.0.10.0

    Hier habe ich, weil ja bald Weihnachten ist, eine Lösung für Euch.
    1. Zip entpacken

    2. Den Inhalt des Ordners icons in den Shop root kopieren, das war es.

    Welche Icons Möglich sind könnt Ihr euch hier anschauen http://fortawesome.github.io/Font-Awesome/icons/

    Wie das ganze eingebunden werden kann, seht Ihr hier http://fortawesome.github.io/Font-Awesome/examples/

    Die Seiten sind zwar in Englisch, aber ich denke das erklärt sich alles von selbst, auch wenn man kein englisch kann.

    Ein Paar wenige HTML Kenntnisse benötigt mann allerdings.

    Wenn Ihr die Icons im Editor verwenden möchtet, müsst Ihr ein erzwungenes Leerzeichen einsetzen, da sonnst der Editor das nicht akzeptiert.
    Code:
    <i class="fa fa-camera-retro fa-5x">&nbsp;</i>
     
    Wenn ihr so etwas direkt in den HTML Dateien ändern wollt, ist das Leerzeichen nicht notwendig.
    Code:
    <i class="fa fa-camera-retro fa-5x"></i>
     
    Auch Aufzählungen sind damit möglich, in etwa so
    Code:
    <ul class="fa-ul">
      <li><i class="fa-li fa fa-check-square"></i>List icons</li>
      <li><i class="fa-li fa fa-check-square"></i>can be used</li>
      <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
      <li><i class="fa-li fa fa-square"></i>in lists</li>
    </ul>
    
    
    Auch die Größen können angepasst werden
    Code:
    <i class="fa fa-camera-retro fa-lg">&nbsp;</i>
    <i class="fa fa-camera-retro fa-2x">&nbsp;</i> 
    <i class="fa fa-camera-retro fa-3x">&nbsp;</i> 
    <i class="fa fa-camera-retro fa-4x">&nbsp;</i> 
    <i class="fa fa-camera-retro fa-5x">&nbsp;</i>
    
    
    Oder auch animierte Sachen wie
    Code:
    <i class="fa fa-camera-retro fa-5x">&nbsp;</i>
    <i class="fa fa-spinner fa-spin">&nbsp;</i>
    <i class="fa fa-circle-o-notch fa-spin">&nbsp;</i>
    <i class="fa fa-refresh fa-spin">&nbsp;</i>
    <i class="fa fa-cog fa-spin">&nbsp;</i>
    <i class="fa fa-spinner fa-pulse">&nbsp;</i>
    
    
    Nicht alles was möglich ist funktioniert sofort, aber was funktioniert könnt Ihr auch später mit dem Responsiv Template von Gambio weiter nutzen.


    So jetzt wünsche ich Euch ein frohes Fest und viel Spaß beim basteln.

    Hier noch der Link wie man Tooltips im Shop einbauen kann http://www.gambio-forum.de/threads/23131-Tooltips-für-alle-Shop-Versionen
     

    Anhänge:

    • icons.zip
      Dateigröße:
      504 KB
      Aufrufe:
      113
  2. Züli

    Züli Erfahrener Benutzer

    Registriert seit:
    5. Mai 2014
    Beiträge:
    61
    Danke erhalten:
    8
    Danke vergeben:
    71
    Sind die Icons auch für kommerziellen Gebrauch frei und kostenlos nutzbar?
     
  3. Manni_HB

    Manni_HB G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    9.098
    Danke erhalten:
    1.540
    Danke vergeben:
    909
    Ort:
    Bremen
  4. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Danke! Die pflanz ich in mein CSEO:CMS..... :):)
     
  5. Kai Schoelzke

    Kai Schoelzke Beta-Held

    Registriert seit:
    30. März 2016
    Beiträge:
    3.807
    Danke erhalten:
    548
    Danke vergeben:
    249
    Steffen du hättest das doch auch ohne meine Hilfe hinbekommen.
     
  6. Kai Schoelzke

    Kai Schoelzke Beta-Held

    Registriert seit:
    30. März 2016
    Beiträge:
    3.807
    Danke erhalten:
    548
    Danke vergeben:
    249
    @All
    Hat das schon jemand in seinem Shop eingebaut, mich würde mal interessieren, wie Ihr das nutzt, am besten mit Link.
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    566
    Danke erhalten:
    59
    Danke vergeben:
    86
    #7 Anonymous, 22. Januar 2016
    Zuletzt bearbeitet: 22. Januar 2016
    Hi Kai,

    bei mir (Link nur für registrierte Nutzer sichtbar.) :(


    (Link nur für registrierte Nutzer sichtbar.), nur wie kann ich das Problem beheben?
     
  8. Kai Schoelzke

    Kai Schoelzke Beta-Held

    Registriert seit:
    30. März 2016
    Beiträge:
    3.807
    Danke erhalten:
    548
    Danke vergeben:
    249
    Hast du noch eine CSS Datei wo das !imposant drin ist? Entferne das mal testweise.
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    566
    Danke erhalten:
    59
    Danke vergeben:
    86
    Wie kann ich dieses überprüfen ohne jede Datei durchscrollen zu müssen? Oder kann ich überprüfen, von woher die Regel kommt, sprich welche Datei?
     
  10. Kai Schoelzke

    Kai Schoelzke Beta-Held

    Registriert seit:
    30. März 2016
    Beiträge:
    3.807
    Danke erhalten:
    548
    Danke vergeben:
    249
    Schau mal in den usermod CSS Dateien ich habe im Moment nur ein Tabletten zur Verfügung kann mir das gern morgen mal anschauen, wenn du mir mal einen Link zukommen lässt
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    566
    Danke erhalten:
    59
    Danke vergeben:
    86
    Werde mal die User Datein durchscrollen, kann scheinbar nur von dort kommen. Werde dann Bescheid geben, bis dahin schon mal Danke :)
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    566
    Danke erhalten:
    59
    Danke vergeben:
    86
    Habs gefunden und funz jetzt. Vielen Dank auch für deine Zusammenstellung :)

    Unbenannt.jpg
     
  13. Kai Schoelzke

    Kai Schoelzke Beta-Held

    Registriert seit:
    30. März 2016
    Beiträge:
    3.807
    Danke erhalten:
    548
    Danke vergeben:
    249
    Na super, Du kannst die Icons auch noch größer machen.
     
  14. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    566
    Danke erhalten:
    59
    Danke vergeben:
    86
    Bin durch Zufall auf dein Thema bei der Suche gestoßen, wollte nämmlich dieses Wochenende mir den Font Awesome einpflegen. Doch dank dir habe ich mir ne Menge Arbeit erspart :)
     
  15. sarahseiler

    sarahseiler Mitglied

    Registriert seit:
    29. Dezember 2015
    Beiträge:
    5
    Danke erhalten:
    0
    ich habe eine Frage zu 1.)
    Hier habe ich, weil ja bald Weihnachten ist, eine Lösung für Euch.
    1. Zip entpacken

    --> Welche Zip? Wo finde ich die?
     
  16. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Hängt unten am ersten Beitrag.
     
  17. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Januar 2016
    Beiträge:
    656
    Danke erhalten:
    115
    Danke vergeben:
    20

    Nicht direkt im Shop aber in einem anderen Projekt... Fontawesome ist schon eine feine Sache :)
     
  18. Schwammerlsuche.de

    Registriert seit:
    28. September 2017
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    8
    Funktioniert das auch mit Honeygrid?
     
  19. HolgerNils (xycons.de)

    HolgerNils (xycons.de) G-WARD 2013/2014

    Registriert seit:
    29. Oktober 2011
    Beiträge:
    1.972
    Danke erhalten:
    456
    Danke vergeben:
    369
    Da ist das fest eingebaut :)
     
  20. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    25. Oktober 2017
    Beiträge:
    406
    Danke erhalten:
    136
    Danke vergeben:
    81
    #20 Anonymous, 15. Januar 2018
    Zuletzt bearbeitet: 15. Januar 2018
    Funktioniert super!
    Einfach die Codes im Html-Editor einbauen.

    Link Piktogramme + Anwendungsbeispiele

    Nachtrag: steht ja schon oben:rolleyes: Nicht irritieren lassen: In der Textansicht des Editors werden die Symbole evtl. nicht angezeigt.