Modul Schicke Icons im Shop einfach darstellen

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

 

Sind die Icons auch für kommerziellen Gebrauch frei und kostenlos nutzbar?

 

Siehe: http://fortawesome.github.io/Font-Awesome/license/

 

Danke! Die pflanz ich in mein CSEO:CMS.....

 

Steffen du hättest das doch auch ohne meine Hilfe hinbekommen.

 

@All
Hat das schon jemand in seinem Shop eingebaut, mich würde mal interessieren, wie Ihr das nutzt, am besten mit Link.

 

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?

 

Hast du noch eine CSS Datei wo das !imposant drin ist? Entferne das mal testweise.

 

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?

 

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

 

Werde mal die User Datein durchscrollen, kann scheinbar nur von dort kommen. Werde dann Bescheid geben, bis dahin schon mal Danke

 

Habs gefunden und funz jetzt. Vielen Dank auch für deine Zusammenstellung

 

Na super, Du kannst die Icons auch noch größer machen.

 

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

 

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?

 

Hängt unten am ersten Beitrag.

 

Nicht direkt im Shop aber in einem anderen Projekt... Fontawesome ist schon eine feine Sache

 

Funktioniert das auch mit Honeygrid?

 

Da ist das fest eingebaut

 

Funktioniert super!
Einfach die Codes im Html-Editor einbauen.

Link Piktogramme + Anwendungsbeispiele

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