[font-awesome] Integration der Icon Font

[webstar]

Im Zuge meines Backend Themes neuland habe ich die Icons von Font Awesome integriert. In erster Linie stellt die Erweiterung die Icons unter assets zur Verfügung. Für mein Theme hatte ich eine Routine geschrieben, die die Icons dynamisch im Backend ersetzt. Diese ist jetzt standardmäßig in der Erweiterung font-awesome vorhanden und kann grundsätzlich über eine PHP Konfiguration erweitert werden.

Diese kann unter Einstellungen als auch in den Benutzer-Einstellungen aktiviert werden. Wenn ein Theme sagt, dass es das Icon-Set erfordert, wird die Option dem Nutzer nicht angezeigt.

Lange Rede, kurzer Sinn. Da für jedes Backend-Modul ein Icon Mapping aufgesetzt werde muss, freue ich mich über Vorschläge und Anregungen, welche Erweiterungen noch mit aufgenommen werden soll. Andere Anregungen und Kritik und Verbesserungsvorschläge sind auch gerne willkommen.

http://contao.org/de/extension-list/...wesome.de.html

[webstar]

Ich habe soeben eine neue Version veröffentlicht. Neben der gewohnten Möglicht im Backend die Icons zu ersetzen, gibt es jetzt unter anderen einen InsertTag für das Frontend.

Neue Funktionen

• Update auf FontAwesome 3.2.1
• Unterstützung neuer Icons im Backend
• InsertTag fa hinzugefügt
• Inhaltselement Icon (Font-Awesome) hinzugefügt

Der InsertTag kann mit folgenden Parametern verwendet werden:

1. Parameter für das Icon und alle Css-Klassen, die mit einen icon- Prefix erhalten
{{fa::adjust}}
<i class="icon-adjust"></i>

{{fa::adjust rotate-90}}
<i class="icon-adjust icon-rotate-90"</i>

2. Parameter für alle weiteren CSS-Klassen
{{fa::adjust::custom-color}}
<i class="icon-adjust custom-color"</i>

Hinweis: Die Version ist nur mit Contao 3.1 kompatibel. Außerdem bringt sie keine angepassten CSS-Dateien mehr mit, sodass gegebenenfalls eigener Code angepasst werden muss.

[dr.house]

Wie benutzt man denn diese Erweiterung? Ich habe die installiert und mit entsprechendem Haken in den Einstellungen habe ich die Icons auch im Backend. Aber wie bekomme ich die Icons in das Frontend? Ich kann im Artikel zwar Icon (Font Awesome) auswählen, doch weiter gibt es da nichts zum Einstellen und es kommt im Frontend nur

<div class="ce_fontAwesomeIcon">
<i class="icon-" 1=""></i>
</div>

an. Was muss man denn noch machen?

[webstar]

Wie benutzt man denn diese Erweiterung? Ich habe die installiert und mit entsprechendem Haken in den Einstellungen habe ich die Icons auch im Backend. Aber wie bekomme ich die Icons in das Frontend? Ich kann im Artikel zwar Icon (Font Awesome) auswählen, doch weiter gibt es da nichts zum Einstellen und es kommt im Frontend nur an. Was muss man denn noch machen?

Hallo Dr.house,

ich hatte vergessen eine Abhängigkeit der Erweiterung im ER zu definieren. Daher konnte man das CE Element nicht nutzen. Außerdem gab es noch einen kleinen Bug. Damit im Frontend die CSS geladen wird, muss man die im Layout hinzufügen. Das wird absichtlich nicht automatisch gemacht. Ich habe jetzt mal ein Auswahlmenü (im CSS Bereich) hinzugefügt, mit dem man die hinzufügen kann.

Also bitte auf aktuelle Version aktualisieren und nochmal probieren.

[itsBerni]

Hallo Webstar,

das css wird wohl eingebunden aber die Icons werden bei mir im FE nicht gerendert. Stimmen die Pfade zu den svgs?

Grüße
Bernd

[webstar]

Hallo Webstar,

das css wird wohl eingebunden aber die Icons werden bei mir im FE nicht gerendert. Stimmen die Pfade zu den svgs?

Grüße
Bernd

Bei mir läuft die Erweiterung einwandfrei (gerade getestet). Falls die Pfade nicht stimmen sollten, was gibt die Webdeveloper-Konsole aus? Wie werden die Icons generiert? Wie ist das HTML-Markup?

[itsBerni]

hmm....dann ist woanders der Wurm drin.
So sieht das bei mir aus Bildschirmfoto 2013-10-22 um 05.54.44.png
Das Markup dazu

<span class="input-group-addon">
<i class="icon-user"></i>
</span>

Und so schaut´s im Layout aus Bildschirmfoto 2013-10-22 um 05.56.42.png
Ich hab es auch schon außerhalb des Formulars probiert - gleicher Effekt

Hab ich noch was vergessen einzustellen?!

[webstar]

Gibt es in der Webdeveloper Leiste des Browsers eine 404er Meldung? (Rechts klick / element untersuchen / console).

Lösch mal den kompletten Browser-Cache und lade die Seite neu.

[itsBerni]

keine 404-Meldung und Cache leeren brachte auch nix...

[webstar]

Ich kenne diese Anzeige, wenn die Schrift Datei nicht richtig geladen oder im Browser-Cache eine alte Version der Schrift liegt.

Kannst du den Link Posten? Dann schau ich mal drüber.

[itsBerni]

Ja, das dachte ich eben auch...
Vielen Dank!

[webstar]

keine 404-Meldung und Cache leeren brachte auch nix...

Doch, die erscheint! Damit war deine Vermutung schon richtig, dass die Dateien nicht geladen werden. Was du auch verschwiegen hat und dein Problem verursacht ;-), dass du Theme-Plus verwendest. Bitte definiere unter System->Assetics einen CSS-Filter "CSS-Rewrite" und füge diesen im Layout als globalen CSS-Filter hinzu. Dann sollte der Pfad auch wieder angepasst werden.

Auswahl_009.jpg

[itsBerni]

Ok, muss ich mir nochmal anschauen, warum ich das im firebug nicht gesehen habe.
Und...es funktioniert. Ich danke dir vielmals!!!
Stand das irgendwo mit dem Theme+ und dem assetic - filter?

[webstar]

Ok, muss ich mir nochmal anschauen, warum ich das im firebug nicht gesehen habe.
Und...es funktioniert. Ich danke dir vielmals!!!
Stand das irgendwo mit dem Theme+ und dem assetic - filter?

Hm, seltsam. Chrome zeigt mir so etwas an. Das habe ich bei der Erweiterung nicht beschrieben. Es ist eine grundsätzliche Sache von Theme+, die zumindest irgendwo im Forum dokumentiert ist.

[itsBerni]

Seit kurzem gibt es ja nun die Version 4 dieses Font - Sets.
Was muss man beim Update beachten?
Können die Dateien einfach in assets/font-awesome/ ersetzt werden, oder holt sich die Erweiterung die neue Version automatisch?

Viele Grüße aus Franken!

[webstar]

Seit kurzem gibt es ja nun die Version 4 dieses Font - Sets.
Was muss man beim Update beachten?
Können die Dateien einfach in assets/font-awesome/ ersetzt werden, oder holt sich die Erweiterung die neue Version automatisch?

Viele Grüße aus Franken!

Hallo Berni,

hatte es noch garnicht mitbekommen, dass die inzwischen veröffentlicht worden. Also ein Update wird nicht ohne weiteres möglich sein, da sich einiges geändert hat:

• Verwendung von fa- Prefix anstatt icon-
• Verwendung von zusätzlicher fa Klasse
• Veränderte Icon-Namen

Ich lasse mir zwar die Icon-Liste für den iconWizard automatisch erstellen, falls man sie aber auch im Backend einsetzt, verwende ich ein Mapping zu den originalen Icons, das ich überprüfen muss. Es ist also mit den Austauschen der CSS-Datei nicht getan.

Hab gerade Termindruck bei anderen Projekten, weshalb das Update wohl ein paar Wochen auf sich warten lassen wird...

[itsBerni]

Ok - kein Stress ;-)

Vielen Dank für die Info.....

[AndreasC]

Hi webstar,

vielen Dank für deine Mühe, deine Extension finde ich wirklich sehr brauchbar

Über ein Update auf 4.x der font-awesome würde ich mich auch sehr freuen, leider ist mein Wissen um die Contao Extensionprogrammierung noch nicht so wirklich ausgereift, um da evtl. helfen zu können.
Daher warte ich gespannt auf die Dinge die da kommen mögen.

LG & Danke

[webstar]

Inzwischen steht ein Update für FontAwesome 4 zur Verfügung. Dies kann man über den Composer Client (netzmacht/contao-font-awesome) installieren. Aus Zeitgründen habe ich noch nicht die ER-Version fertig bekommen.

Neben der Verwendung von FontAwesome 4 gibt es für verwendete InsertTags einen Debug-Modus. Da bei FA 4 einige Icons umbenannt wurden, kann man sich so anzeigen lassen, welche Icons nicht mehr existieren. Es wird dann der Iconname rot gefärbt ausgegeben.

Aktiviert wird der Debug-Modus entweder durch den Contao Debug Modus, oder für die, die mit Theme+ arbeiten durch die Aktivierung des Designermodus.

[cont77]

Hallo,

kann bzw. wie kann ich mit Hilfe der Erweiterung font-awesome-Icons in meinem CSS als Pseudoelemente (:before und/oder :after) einbinden?

Danke & Grüße.

[tblumrich]

Ich mach das immer über die entsprechenden Unicodes, siehe z.B.
http://astronautweb.co/snippet/font-awesome/

Gruß
Thomas

[webstar]

Hallo,

kann bzw. wie kann ich mit Hilfe der Erweiterung font-awesome-Icons in meinem CSS als Pseudoelemente (:before und/oder :after) einbinden?

Danke & Grüße.

Siehe dem Vorschlag von tblumrich. Als Ergänzung, wenn man mit Less arbeitet, so bietet Font-Awesome für die Unicode-Werte auch Variablen an. Erleichtert einen die Arbeit nochmal.

[cont77]

Ich mach das immer über die entsprechenden Unicodes

Ja, so würde ich es normalerweise auch lösen.
Die Seite scheint die FontAwesome aber nicht zu finden.

Muss ich die "FontAwesome" nicht erst irgendwie ins CSS einbinden.

Wie gesagt, die Erweiterung habe ich ganz normal installiert.

Danke & Grüße.

[cont77]

Muss ich die "FontAwesome" nicht erst irgendwie ins CSS einbinden.

GELÖST! Funktioniert super.
Ich hatte für den Test vergessen das CSS wieder in das Layout einzubinden!

Sorry und Danke!

[Babelfisch]

Ich bin mal so frei und weise auf ein anderes Thema im Zusammenhang mit der Erweiterung hin:

https://community.contao.org/de/show...-Wartungsmodus

Gruß

[ways2web]

werden euch die Icons im Formulargenerator angezeigt? Contao 3.2.10

[wiese]

Funktioniert die Erweiterung mit Contao 3.3? Ich hab netzmacht/contao-font-awesome über den Composer installiert, finde aber keine Einstellungen oder ähnliches?

[ways2web]

ich hab das Problem, dass Sie bei mir nicht mal unter 3.2.10 funktioniert
hat jemand ein Tip warum mir die symbole nicht angezeigt werden?

[webstar]

ich hab das Problem, dass Sie bei mir nicht mal unter 3.2.10 funktioniert
hat jemand ein Tip warum mir die symbole nicht angezeigt werden?

Welche Version hast du denn installiert? Die aus dem ER oder von Composer?

Wo werden die Symbole nicht angezeigt? Im Backend oder Frontend? Wird die Icon-Font als CSS-Datei geladen oder gibt es eine 404er Meldung?

[EDIT]:

Ich habe es gerade selbst probiert. Problematisch ist, dass Font-Awesome unter assets/ falsch verlinkt wird. Das ist ein generelles Problem von Composer bisher, das die installierten Assets nicht direkt benutzbar sind. Ich versuche dies zu umgehen, das klappt aber nicht auf allen Systemen.

Es zeichnet sich aber eine allgemeine Lösung ab: https://github.com/contao-community-...ser/issues/188

Als Workaround: unter assets/font-awesome die benötigten CSS-Dateien von Hand installieren.

[webstar]

Funktioniert die Erweiterung mit Contao 3.3? Ich hab netzmacht/contao-font-awesome über den Composer installiert, finde aber keine Einstellungen oder ähnliches?

Nein, die Erweiterung läuft noch nicht unter Contao 3.3. Die Einstellungen sollten dennoch sichtbar sein.

Contao 3.3 benutzt für die installierten Versionen der Assets (Datepicker, Colorpicker, SimpleModal usw.) keine Konstanten mehr, sondern benutzt dafür jetzt ein tl_assets array. Da die Erweiterung ein angepasstes Template be_main.html5 Template nutzt, funktioniert das ganze dann nicht mehr.

[ways2web]

Welche Version hast du denn installiert? Die aus dem ER oder von Composer?

Wo werden die Symbole nicht angezeigt? Im Backend oder Frontend? Wird die Icon-Font als CSS-Datei geladen oder gibt es eine 404er Meldung?

ich nutze die composer version (all-inkl.).. angezeigt wird im backend gar nichts... hab grad den code angeschaut... isn 404er für die css
grund hierfür ist, dass die dateien nicht unter assets/font-awesome angelegt wurden sondern unter assets/font-awesome/www/htdocs/xxx/usw . die struktur ist also komplett falsch :/

wenn css nicht angelegt wurde.. dann natürlich auch nicht assets/fonts also hab ihc das auch noch angelegt und die fonts hochgeladen... 4045 erhalte ich gar keine mehr, wenn ich richtig sehe...

aber selbst nachdem ich das Problem mit dem 404er für das css beseitigt habe... wird mir noch nochts angezeigt.

screener: fa.jpg

[wiese]

Danke für die Tipps, ich schaue es mir mal an. Fürs Backend brauche ich die Icons eigentlich nicht - nur fürs Frontend.

[webstar]

Ich habe heute die Version 4.1 veröffentlicht, das auf FontAwesome 4.1 basiert. Diese Versioin ist mit Contao 3.3 kompatibel und wird nur noch über Composer veröffentlicht. Als weitere Änderung wird an Stelle von fortawesome/font-awesome components/font-awesome geladen. Vorteil: Es werden nicht die ganzen Docs geladen, wodurch das Paket kleiner wird.

[webstar]

Soeben habe ich die Version 4.1.1 veröffentlicht. Diese ist mit dem neuen Composer Plugin ab Version 2.2 kompatibel. Dieses bringt das Feature mit, dass alle Assets, die über den Components-Installer installiert werden unter assets/components/ liegen.

Achtung: Dies bedeutet für alle, die die Dateien von assets/font-awesome eingebunden habe die Pfadangaben ändern müssen auf assets/components/font-awesome.

[ways2web]

ist ein manuelles update auf font-awesome 4.2 ratsam?
also austausch von css und font files.. oder reicht das bei weitem nicht?

[webstar]

ist ein manuelles update auf font-awesome 4.2 ratsam?
also austausch von css und font files.. oder reicht das bei weitem nicht?

Grundsätzlich reicht dies. Allerdings kennt das IconWizard dann die neu hinzugekommenen Icons nicht. Diese sind in einer Konfigurationsdatei hinterlegt. Ich werde demnächst ein Update zur Verfügung stellen. Hab noch etwas Urlaubs-Rückstau.

[chrischnian]

Ich habe gestern über den Composer dein netzwelt-fontawesome installiert.

Dabei ist es zu einen 500er gekommen. Danach wollte ich es wieder deinstallieren und nun kommt dieser Fehler!

Warning: require(/kunden/433549_96328/webseiten/contao/composer/vendor/kriswallsmith/assetic/src/functions.php): failed to open stream: No such file or directory in composer/vendor/composer/autoload_real.php on line 54

#0 composer/vendor/composer/autoload_real.php(54): __error(2, 'require(/kunden...', '/kunden/433549_...', 54, Array)
#1 composer/vendor/composer/autoload_real.php(54): composerRequire8acfd3b25f816e17d0c7cf181cadba87()
#2 composer/vendor/composer/autoload_real.php(45): composerRequire8acfd3b25f816e17d0c7cf181cadba87('/kunden/433549_...')
#3 composer/vendor/autoload.php(7): ComposerAutoloaderInit8acfd3b25f816e17d0c7cf181cadba87::getLoader()
#4 system/modules/!composer/src/Runtime.php(413): require_once('/kunden/433549_...')
#5 system/modules/!composer/src/Runtime.php(100): ContaoCommunityAlliance\Contao\Composer\Runtime::registerVendorClassLoader()
#6 system/cache/config/config.php(509): ContaoCommunityAlliance\Contao\Composer\Runtime::initialize()
#7 system/modules/core/library/Contao/Config.php(134): include('/kunden/433549_...')
#8 system/modules/core/library/Contao/Config.php(112): Contao\Config->initialize()
#9 system/initialize.php(156): Contao\Config::getInstance()
#10 contao/index.php(24): require('/kunden/433549_...')
#11 {main}


Fatal error: require(): Failed opening required '/kunden/433549_96328/webseiten/contao/composer/vendor/kriswallsmith/assetic/src/functions.php' (include_path='.:/usr/local/lib/php') in /kunden/433549_96328/webseiten/contao/composer/vendor/composer/autoload_real.php on line 54

kannst du mir dazu was sagen?

[ways2web]

Verwendest du irgendwo einen assetic Filter? Der Fehler meldet das nämlich. Steht eigentlich zur Verfügung, wenn Therme plus installiert ist

gesendet mit Tapatalk.

[chrischnian]

Sorry weiß gerade nicht von was du schreibst.

Ich habe erst ganz normal es über Composer installiert und wenn er das als abhängigkeit installiert hat, dann ist es darüber gekommen.

Was kann ich jetzt machen um es wieder zu reparieren?

[chrischnian]

Also wenn es durch eine Abhängigkeit installiert wurde dann ja. Ich selbst habe es nicht bewusst installiert.

Auch ThemePlus habe ich nicht installiert wenn es nicht durch eine Abhängigkeit installiert wurde.

Wie wäre es nun das beste, das wieder zu reparieren? Kann ich die Erweiterungen einfach aus den Reposotory von der Webseite laden selbst entpacken und dann hochladen oder wie würdet ihr vorgehen?