Icons in Buttons

**ffreshh** · 26.10.2014, 02:18

Hallo zusammen,

ich bekomme es nicht hin Icons in Schaltflächen auszugeben.
Ich lege einen Inhaltselement vom Typ "Schaltfläche" an und habe dort die Option "bootstrap_icon". Beim auswählen werden mir dort auch Icons angezeigt (allerdings auch nur Font-Awesome, wenn ich in den Einstellungen Glyphicons auswähle zeigt mir der IconWizard keine Icons an?). Im Frontend habe ich allerdings nur einen Button ohne Icon. im HTML steht auch nichts von einem Icon.
Das ganze funktioniert allerdings bei den Formularen problemlos. Liegt es daran dass man im Formular auch ein Häkchen setzen muss (Icon verwenden)?

Kann mich wer aufklären?

Grüße

**ways2web** · 26.10.2014, 14:45

ich nutze font-awesome und damit klappt es sehr gut in den schaltflächen.
kannst ja mal im firebug schauen, ob deine gly. font-files geladen wurde (netzwerk tab)

**ffreshh** · 26.10.2014, 16:25

Font-Awesome ist eingebunden und auch anderweitig im Einsatz (Icons in der Navigation).
Aber wie ich schrob bekomme ich bei den Schaltflächen nicht mal die Ausgabe im Quellcode für ein Icon. Nur der normale Button.
Am Template für die Buttons habe ich auch nicht rumgespielt.

**webstar** · 26.10.2014, 17:09

Zitat von ffreshh

Font-Awesome ist eingebunden und auch anderweitig im Einsatz (Icons in der Navigation).
Aber wie ich schrob bekomme ich bei den Schaltflächen nicht mal die Ausgabe im Quellcode für ein Icon. Nur der normale Button.
Am Template für die Buttons habe ich auch nicht rumgespielt.

Da ich an Freitag selbst erst darüber gestolpert bin, die icons sind bei der Schaltfläche zur Zeit defekt. Ist bei der Portierung zu contao-bootstrap/components verloren gegangen.

Nutze doch als workaround die icons inserttags. {{fa::icon-name}} von fontawesome oder {{icon::icon-name}}.

**ffreshh** · 26.10.2014, 17:52

Zitat von webstar

Da ich an Freitag selbst erst darüber gestolpert bin, die icons sind bei der Schaltfläche zur Zeit defekt. Ist bei der Portierung zu contao-bootstrap/components verloren gegangen.

Nutze doch als workaround die icons inserttags. {{fa::icon-name}} von fontawesome oder {{icon::icon-name}}.

Das beruhigt mich insofern als dass ich meine Selbstzweifel aus dem Weg räumen kann

Wird das in einem der nächsten Updates wieder gefixt? Inserttags sind super aber für den Redakteur leider nicht so knorke.

Hast du vielleicht noch eine Idee woran es liegt dass ich bei ausgewählten Glyphicons im Iconwizard keine Icons angezeigt bekomme?
Die Auswahl funktioniert, ebenso die Ausgabe (ausser in Schaltflächen

) im FE, lediglich die Auswahl im Iconwizard nicht.

**swinde** · 26.10.2014, 18:39

Hallo

Hast du vielleicht noch eine Idee woran es liegt dass ich bei ausgewählten Glyphicons im Iconwizard keine Icons angezeigt bekomme?
Die Auswahl funktioniert, ebenso die Ausgabe (ausser in Schaltflächen

) im FE, lediglich die Auswahl im Iconwizard nicht.

Hast du diese Änderung gemacht?
siehe hier https://github.com/contao-bootstrap/core/issues/1

**ways2web** · 26.10.2014, 23:07

Zitat von webstar

Da ich an Freitag selbst erst darüber gestolpert bin, die icons sind bei der Schaltfläche zur Zeit defekt. Ist bei der Portierung zu contao-bootstrap/components verloren gegangen.

Nutze doch als workaround die icons inserttags. {{fa::icon-name}} von fontawesome oder {{icon::icon-name}}.

oha.. und bei mir gehts, weil ich das noch in 0.2.4 angelegt habe? laufen hab ich jetzt die 0.2.6... nutze also nicht das bundle
hab es auch erst vorgestern angelegt auf einer produktiven seite... hab keine Probleme.

**webstar** · 27.10.2014, 10:48

Zitat von ffreshh

Das beruhigt mich insofern als dass ich meine Selbstzweifel aus dem Weg räumen kann

Wird das in einem der nächsten Updates wieder gefixt? Inserttags sind super aber für den Redakteur leider nicht so knorke.

Ja. Wie gesagt, ein Workaround.

Zitat von ffreshh

Hast du vielleicht noch eine Idee woran es liegt dass ich bei ausgewählten Glyphicons im Iconwizard keine Icons angezeigt bekomme?
Die Auswahl funktioniert, ebenso die Ausgabe (ausser in Schaltflächen

) im FE, lediglich die Auswahl im Iconwizard nicht.

Ähm, ja. Durch durch eine Änderung im letzten Release, werden die Icons nicht mehr im iconWizard angezeigt. Wird im nächsten Release gefixt. Liegt an der fehlenden CSS-Datei, die nicht geladen wird. Tritt mit FontAwesome nicht auf, da FontAwesome selber dafür sorgt, dass die Icons im BE zur Verfügung stehen.

**webstar** · 27.10.2014, 10:49

Zitat von ways2web

oha.. und bei mir gehts, weil ich das noch in 0.2.4 angelegt habe? laufen hab ich jetzt die 0.2.6... nutze also nicht das bundle
hab es auch erst vorgestern angelegt auf einer produktiven seite... hab keine Probleme.

Ja, ist nur ein Fehler in der contao-bootstrap/compontents.

**swinde** · 27.10.2014, 11:36

Hallo webstar,

wie und wo kann man die icons inserttags verwenden? Braucht man da eine Erweiterung dafür?

Vg Steffen Winde

Edit: Ich glaube ich habe es gerade selbst gefunden!?

https://github.com/netzmacht/contao-font-awesome

**webstar** · 29.10.2014, 08:33

Zitat von swinde

Hallo webstar,

wie und wo kann man die icons inserttags verwenden? Braucht man da eine Erweiterung dafür?

Vg Steffen Winde

Edit: Ich glaube ich habe es gerade selbst gefunden!?

https://github.com/netzmacht/contao-font-awesome

Ja, der {{fa::*}} Insert-Tag kommt daraus. Der {{icon::*}}-Inserttag ist Teil der Bootstrap Erweiterung.

**swinde** · 29.10.2014, 10:05

Hallo!

Ich habe die Erweiterung installiert und die Icon Inserttags funktionieren einwandfrei! Super! Danke schön!

Ich habe auch herausgefunden, daß man die Icongröße durch {{fa::icon::fa-lg oder fa-2x oder fa-3x}} steuern kann.

Vg Steffen Winde

**webstar** · 29.10.2014, 10:32

Zitat von swinde

Hallo!

Ich habe die Erweiterung installiert und die Icon Inserttags funktionieren einwandfrei! Super! Danke schön!

Ich habe auch herausgefunden, daß man die Icongröße durch {{fa::icon::fa-lg oder fa-2x oder fa-3x}} steuern kann.

Vg Steffen Winde

Es geht noch einfacher

{{fa::icon lg::custom-class}}. Der erste Parameter kann mit Leerzeichen getrennten Klassen umgehen. Alle bekommen einen Prefix fa-. Siehe https://community.contao.org/de/show...l=1#post291333

**zonky** · 29.10.2014, 13:07

Zitat von webstar

Nutze doch als workaround die icons inserttags. {{fa::icon-name}} von fontawesome oder {{icon::icon-name}}.

wo kommt den {{icon::icon-name}} her??

**m-werk** · 07.11.2014, 12:52

Ohh, danke für die Info

**ways2web** · 23.11.2014, 02:07

Zitat von webstar

...
Nutze doch als workaround die icons inserttags. {{fa::icon-name}}

machst du das auch so, wenn du in einem Formelement direkt die Absende-Schaltfläche aktivierst? (beispiel deine Projektseite die Sucheingabe oben rechts)

leider ist ja "Bezeichnung der Absende-Schaltfläche" ein Pflichtfeld, so das man bei der Verwendung von Icon dann immer Text und Icon auf dem Button hat.. im gegensatz wie die von dir verwendete sucheingabe auf deiner Projektseite

**webstar** · 24.11.2014, 12:27

Zitat von ways2web

machst du das auch so, wenn du in einem Formelement direkt die Absende-Schaltfläche aktivierst? (beispiel deine Projektseite die Sucheingabe oben rechts)

leider ist ja "Bezeichnung der Absende-Schaltfläche" ein Pflichtfeld, so das man bei der Verwendung von Icon dann immer Text und Icon auf dem Button hat.. im gegensatz wie die von dir verwendete sucheingabe auf deiner Projektseite

Wenn es quick and dirty is, ja. Sonst packe ich dort eine Beschreibung rein und blende diese aus aus Gründen von Barrierefreiheit.

**karo68** · 10.02.2015, 12:51

also, bei mir werden die Fonts von font-awesome nicht im backend angezeigt. In der Icon-Auswahl sehe ich zwar die Namen aber nicht die Symbole. Einbinden kann ich sie trotzdem, auch mit dem Insert-Tag. Außderdem bekomme ich über den Firebug einen Netzwerk-Fehler-404 "/assets/components/font-awesome/css/font-awesome.min.css" wird nicht gefunden. Ich habe das Paket "netzmacht/contao-font-awesome" installiert. Oder ist das nicht das richtige?

Gruß
Karsten

**webstar** · 10.02.2015, 13:20

Zitat von karo68

also, bei mir werden die Fonts von font-awesome nicht im backend angezeigt. In der Icon-Auswahl sehe ich zwar die Namen aber nicht die Symbole. Einbinden kann ich sie trotzdem, auch mit dem Insert-Tag. Außderdem bekomme ich über den Firebug einen Netzwerk-Fehler-404 "/assets/components/font-awesome/css/font-awesome.min.css" wird nicht gefunden. Ich habe das Paket "netzmacht/contao-font-awesome" installiert. Oder ist das nicht das richtige?

Gruß
Karsten

An sich ist das die richtige Version. netzmacht/contao-font-awesome lädt FontAwesome über components/font-awesome. Leider haben die Jungs von den components Paketen den Installer "robloach/component-installer" entfernt, sodass Font-Awesome unter dem falschen Pfad installiert wird. Dies kann man folgender maßen lösen:

robloach/component-installer über Composer installieren
netzmacht/contao-font-awesome deinstallieren (ohne DB Aktualisierungen) und wieder neu installieren

Dann sollten die Font-Dateien gefunden werden. Dies ist ein Bug bei netzmacht/contao-font-awesome. Machst du dort bitte ein Ticket?

**karo68** · 10.02.2015, 13:42

Dies kann man folgender maßen lösen:

robloach/component-installer über Composer installieren
netzmacht/contao-font-awesome deinstallieren (ohne DB Aktualisierungen) und wieder neu installieren

hat geklappt, danke!

Dies ist ein Bug bei netzmacht/contao-font-awesome. Machst du dort bitte ein Ticket?

Ticket: https://github.com/netzmacht/contao-...some/issues/11