Icons in Buttons

Druckbare Version

26.10.2014, 02:18
ffreshh

Icons in Buttons

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
26.10.2014, 14:45
ways2web

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)
26.10.2014, 16:25
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.
26.10.2014, 17:09
webstar

Zitat:

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}}.
26.10.2014, 17:52
ffreshh

Zitat:

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 :D
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.
26.10.2014, 18:39
swinde

Hallo

Zitat:

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
26.10.2014, 23:07
ways2web

Zitat:

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.
27.10.2014, 10:48
webstar

Zitat:

Zitat von ffreshh

Das beruhigt mich insofern als dass ich meine Selbstzweifel aus dem Weg räumen kann :D
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:

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.
27.10.2014, 10:49
webstar

Zitat:

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.
27.10.2014, 11:36
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
29.10.2014, 08:33
webstar

Zitat:

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.
29.10.2014, 10:05
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
29.10.2014, 10:32
webstar

Zitat:

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
29.10.2014, 13:07
zonky

Zitat:

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??
07.11.2014, 12:52
m-werk

Ohh, danke für die Info
23.11.2014, 02:07
ways2web

Zitat:

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
24.11.2014, 12:27
webstar

Zitat:

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.
10.02.2015, 12:51
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
10.02.2015, 13:20
webstar
Zitat:

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:
1. robloach/component-installer über Composer installieren
2. 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?
10.02.2015, 13:42
karo68

Zitat:

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!

Zitat:

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

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