[font-awesome] Integration der Icon Font

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

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:

HTML-Code:

---

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.

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

HTML-Code:

---

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

---

an. Was muss man denn noch machen?

Zitat:

---

Zitat von 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 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. :)

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

Zitat:

---

Zitat von 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

---

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?

hmm....dann ist woanders der Wurm drin.
So sieht das bei mir aus Anhang 12109
Das Markup dazu

HTML-Code:

---

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

---

Und so schaut´s im Layout aus Anhang 12110
Ich hab es auch schon außerhalb des Formulars probiert - gleicher Effekt

Hab ich noch was vergessen einzustellen?!

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.

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

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.

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

Zitat:

---

Zitat von itsBerni

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.

Anhang 12111

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?

Zitat:

---

Zitat von 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?

---

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.

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!

Zitat:

---

Zitat von 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!

---

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...

Ok - kein Stress ;-)

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

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

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.

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.

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

Gruß
Thomas

Zitat:

---

Zitat von 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.

---

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.

Zitat:

---

Zitat von tblumrich

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.

Zitat:

---

Zitat von 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!

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ß

werden euch die Icons im Formulargenerator angezeigt? Contao 3.2.10

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

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?

Zitat:

---

Zitat von 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?

---

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.

Zitat:

---

Zitat von wiese

Funktioniert die Erweiterung mit Contao 3.3? Ich hab netzmacht/contao-font-awesome über den Composer installiert, finde aber keine Einstellungen :o 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.

Zitat:

---

Zitat von webstar

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: Anhang 13711

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

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.

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.

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

Zitat:

---

Zitat von ways2web

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. ;)

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!

Code:

---

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?

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.

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?

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?

Sicher, dass die Installation ohne Fehler von statten lief?

Und wie gesagt, ich kenne den Fehler nur, wenn ich jsMin oder ähnliches einsetzen wollte

gesendet mit Tapatalk.

Ja mir ist nichts aufgefallen.

Ja, kriswallsmith/assetic kommt als indirekte dependency bei der netzmacht/contao-font-awesome installation herein: contao-font-awesome-depenencies.png

Zum Fehler: ich vermute auch, dass bei der Installation oder Deinstallation etwas schief gegangen ist. Hast du ein File-Backup der Seite vor der font-awesome installation?

Nee diesesmal kein Backup weil sonst hätte ich es ja selbst lösen können :D

Ich werde in einer TestInstallation erstmal das nachstellen und eine Lösung suchen. Ja es ging nur bei der deinstallation was schief. Habe gerade gesehen das im Cache der Seite noch das Paket von assetic liegt. Mal schauen ob ich damit die Installation wieder zum laufen bekomme und die deinstallation nochmal machen kann.

An sich deutet wirklich alles auf eine fehlerhaftes Update hin.

Wenn du Zugriff über die Console hast, dann geh mal bitte in deine Contao-Installation und mach folgendes:

Code:

---

$ cd composer
$ php composer.phar update

---

Wenn dies nicht der Fall ist, versuche folgendes. Such dir die Datei composer/vendor/autoload_files.php und kommentier die Zeile aus, die folgenden Pfad enthält "/kriswallsmith/assetic/src/functions.php". Wenn die Installation dann wieder läuft, versuche erneut ein Pakete aktualisieren im Backend. Falls es dann einen Fehler gibt, bitte her damit. Falls dies nicht funktioniert, ist wohl noch mehr defekt.

PHP-Code:

---

return array(
//    $vendorDir . '/kriswallsmith/assetic/src/functions.php',
); 


---

Danke webstar nun läuft es wieder.

Dachte nicht das mal ein kurzes ausprobieren so viele Probleme macht :D

Das nächste mal wieder in einer reinen Testumgebung :D

Als letztes doch noch eine Frage
Wie bekomme ich dieses "scheinbar" Fehlerhafte Paket von kriswallsmith komplett raus?

Zitat:

---

Zitat von chrischnian

Als letztes doch noch eine Frage
Wie bekomme ich dieses "scheinbar" Fehlerhafte Paket von kriswallsmith komplett raus?

---

Hast du nochmals die Pakete aktualisiert? Wenn ja und wenn dadurch alles darüber installiert ist, brauchst du nichts zu entfernen.

Hallo webstar,
ich nutze aktuell FontAwesome nur über css über Content mit den codes der Seite: http://astronautweb.co/snippet/font-awesome/

Ist es auch möglich die einzelnen Icons im Backend zu betrachten?

Wie funktioniert das mit den Insert-Tags?
Ich hab mal {{fa::fa-cc::class}} probiert, irgendwie klappte das nicht...

Hallo,

ich habe eine Contao 3.4.3 Installation (netzmacht/contao-theme-plus dev-support/4.x), netzmacht/contao-font-awesome 4.3.0.1

Im BE wird das CSS eingebettet und die Icons angezeigt, aber im FE nicht.
Habe die font-awesome.min.css selbst hinzugefügt über Theme Plus und musste dann noch die Font-Dateien in den Order assets/fonts kopieren (Screenshot).
Nun werden die Icons angezeigt...

Dieser Weg ist sicherlich nicht so gedacht? :)
Hat jemand eine Idee?

Danke Fabian

Zitat:

---

Zitat von fabian.britsch

Hallo,

ich habe eine Contao 3.4.3 Installation (netzmacht/contao-theme-plus dev-support/4.x), netzmacht/contao-font-awesome 4.3.0.1

Im BE wird das CSS eingebettet und die Icons angezeigt, aber im FE nicht.
Habe die font-awesome.min.css selbst hinzugefügt über Theme Plus und musste dann noch die Font-Dateien in den Order assets/fonts kopieren (Screenshot).
Nun werden die Icons angezeigt...

Dieser Weg ist sicherlich nicht so gedacht? :)
Hat jemand eine Idee?

Danke Fabian

---

Theme+ benötigt den Css-Rewrite-Filter. Dieser korrigiert die relativen Pfade, die durch das Zusammenkopieren der CSS Dateien durch Therme+ nicht mehr korrekt sind.

Am besten dem Filter unter assetics anlegen und dann im layout zugewiesen.

Dies sollte dein Problem lösen.

Ich habe das auch ohne Themen+ bei mir gehabt. Da lag es glaube ich an den Schreibrechten für den Ordner assests. Habe das nicht weiter verfolgt, da ich die Dateien dann schnell kopiert hatte.

Gesendet von meinem A0001 mit Tapatalk