Verwendung von Fontawesome mit kit-fontawesome

[dawson]

Hallo zusammen,

ich möchte bei meiner Contao-Installation (3.3.5) die Icons von Fontawesome nutzen.
Wie kann ich die am einfachsten Einbinden?
Kann ich mir die Dateien manuell herunter laden und die CSS "per Hand" irgendwo einbinden?

Ich habe mir auch das "kit-fontawesome" aus den Extensions installiert.
Aber ... da passiert nix und ich weiß nicht, wo ich was einstellen muss und vor allem ob

<i class="fa fa-camera-retro"></i>

damit funktioniert.

Kann mir da einer weiterhelfen?

[swinde]

Benutze doch die Inserttags. {{fa::camera-retro:ptionalGröße}}

Steffen Winde

[tblumrich]

Ich habe mir auch das "kit-fontawesome" aus den Extensions installiert.
Aber ... da passiert nix und ich weiß nicht, wo ich was einstellen muss und vor allem ob damit funktioniert.

Kann mir da einer weiterhelfen?

Du musst im Seitenlayout noch einstellen welche Quelle verwendet werden soll.

Gruß Thomas

[dawson]

Sorry, aber das versteh ich jetzt nicht - ich bin grad auf der Seite "Seitenlayout" - da is nix mit Quelle. Wo genau sollte das stehen und wie ist es formuliert?
Ich kann nur meine selbst erstellen CSS-Dateien einbinden. Und wenn ich auf "zusätzliche Stylesheets" gehe, sehe ich keinen Ordner von fontawesome...

Funktioniert die Erweiterung evtl. nicht?
Ich bin ehrlich gesagt grundsätzlich ziemlich unzufrieden mit den Contao-Erweiterungen. So gut wie keine Doku. Keine Hilfe, keine Erklärungen. "Installiers und dann finde es selbst heraus", sozusagen.
Dazu habe ich aber bei Projekten weder die Zeit noch die Geduld.
Und manchmal geht eine "alte" Erweiterung noch - das soll man dann riechen, und manchmal zerstört sie auch deine Contao-Installation und Rückgängig-machen geht nur mit viel Wissen und Aufwand. Das kanns doch nicht sein.
Und ja, ich hab den Composer auch ausprobiert - da komm ich erst recht nicht mit klar.
Bin ja kein DAU, was so was angeht - aber da ansch. schon.. ;-(

[swinde]

In meinen Seitenlayouts gibt es ein Dropdown Menü

FontAwesome einbinden

Falls Sie FontAwesome Icons im Layout einsetzen, muss die CSS Datei eingebunden werden.

Gleich unter weitere Stylesheets einbinden.

[tblumrich]

Da ist jetzt die Rede von zwei verschiedenen Erweiterungen, meine Aussage bezog sich auf die "kit-fontawesome".
Ich hab dir mal einen Screenshot gemacht.
screen_kit_fa.png

Gruß
Thomas

[tab]

Also das bisher einzige Mal, dass ich FontAwesome genutzt habe, habe ich das ohne eine Erweiterung gemacht. Vielleicht falsch, aber jedenfalls hat es funktioniert. Wenn ich mich recht erinnere, dann kam der Tipp von Lucina. Ich kann ja mal kurz in die entsprechende Installation reinschauen...

Edit: Da habe ich das CSS als zusätzlichen Head-Tag eingebunden.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Danach lässt sich als Schriftart "FontAwesome" benutzen.

[dawson]

@tab: genau. Aber wo gebe ich dieses ein? Ich glaub ich hab das Contao-Prinzip noch net so kapiert. Sorry.
Ich hätte dazu jetzt die fe_page angepasst. Wollte ich aber vermeiden.
Geht das auch anders?

[dawson]

@tblumrich:
Also mein Screenshot sieht da etwas anders aus. (Contao 3.3.5, wenn mich nicht alles täuscht).
Guckst du hier:
Screenshot.png

- und schon weiß ich auch, wo ich einen zusätzlichen head-Tag eingeben kann. ;-)

[dawson]

Gut. Der Screenshot sieht bei mir nun wieder etwas anders aus.

contao_screenshot.jpg

Habe soeben eine weitere Extension installiert und dabei wurde offenbar noch ein Rest von kit-fontawesome ausgeführt. Jetzt ist es sichtbar.
Sorry also für die Verwirrung.
Jetzt klappt auch die Einbindung über die üblichen <i class.... usw. einwandfrei.
Danke.

[tab]

Auf deinen Screenshots sieht man doch das Eingabefeld für zusätzliche Head-Tags. Da steht es bei mir drin.

[dawson]

@tab: ja, hab ich ja zwei Posts davor geschrieben, dass ich es jetzt weiß, wo man den head-Tag eingeben kann. Hatte ich vorher nicht gesehen. Sorry.
Fontawesome läuft - awesome. ;-)

[dawson]

Und um das Ganze abzuschließen, hab ich hier noch einen Code-Schnipsel, mit dem ich die Icons auch übers CSS steuern kann:

#left .ce_text h2:before {
    margin-left:10px;
    padding-right:10px;
    font:1.1em/1.6em FontAwesome;
    color:#000;
    content: "\f15c";
}

So kann ich ein Icon z. B. auch einer Überschrift zuweisen, die innerhalb eines Downloads-Elements liegt.

Und zu guter Letzt: hier findet man alle content-Werte für alle FontAwesome-Icons (aktuelle Version 4.2.0)
http://astronautweb.co/snippet/font-awesome/


Vielleicht hilfts jemanden.

[Preetz]

Jetzt kommt vielleicht eine ganz blöde Frage:

Wo kann ich mir die Icons und die Bezeichnung dazu angucken?

content: "\f000"; 

Danke
Preetz

[hofff]

Jetzt kommt vielleicht eine ganz blöde Frage:

Wo kann ich mir die Icons und die Bezeichnung dazu angucken?

content: "\f000"; 

Danke
Preetz

Das kannst du hier tun: http://fortawesome.github.io/Font-Awesome/cheatsheet/

fg
nicky


Gesendet von iPad mit Tapatalk

[Preetz]

Vielen Dank aber so richtig verstanden habe ich das noch nicht.

Ich habe jetzt die Erweiterung [kit_fontawesome] installiert.
Habe dann im Seitenlayout entsprechend "Font-Awesome - bootstrapcdm.com gewählt.

Jetzt möchte ich gerne die Icons in der Navigation anzeigen lassen. Habe hierfür jeder Seite eine Klasse gegeben: Startseite, WirUeberUns usw.

Wie lege ich jetzt die Icons mit dem Menüpunkt zusammen?

Preetz

[tab]

Da gibt es sogenannte "Cheatsheets", z.B. für die aktuelle Version 4.3.0 unter
http://fortawesome.github.io/Font-Awesome/cheatsheet/

Edit: Zu langsam ...

[Preetz]

Da gibt es sogenannte "Cheatsheets", z.B. für die aktuelle Version 4.3.0 unter
http://fortawesome.github.io/Font-Awesome/cheatsheet/

Edit: Zu langsam ...

Macht ja nix ;-)

Für mich ist noch unklar, wie man die jetzt einbindet?!
Habe oben beschrieben was ich vor habe.

Danke Euch!

[tab]

Na, das geht wie von Dawson beschrieben per CSS. Dazu brauchst du jeweils einen passenden Selektor für die Menüpunkte, dann kannst du mit Hilfe der Pseudoklassen before oder after das entsprechende Zeichen als content einfügen.

[Preetz]

Peile ich immer noch nicht!

Selektor?
Pseudoklassen?

Mit after und befor komme ich aber klar :P

[Alexander]

Hallo zusammen,

bei mir ist das Problem, dass ich nun noch nicht weiß, wie ich dies konkret im Rahmen eines Artikels-> Text einfügen kann.
Ich habe dort:

<h3>Überschrift</h3><p>Blabla</p>

Vor dem h3-Element soll ein Icon stehen. Wenn ich h3 die Klasse

class="fa fa-anchor"

gebe, kommt zwar das Icon, die Schrift sieht jedoch nicht wirklich schön aus, aufgrund der ".fa"-Formatierungen im CSS von FontAwesome.
Das oft beschriebene "i"-Element (also <i class="fa fa-anchor"></i>) löscht mir der Texteditor einfach weg.

Hat hier jemand eventuell einen Tipp für mich, wie ich den Fuß vom Schlauch kriege?

Beste Grüße
Alexander

[Spooky]

Du kannst die FontAwesome Insert tags (zB {{fa::phone}}) verwenden (falls du die FontAwesome Extension benutzt).

• https://github.com/netzmacht/contao-font-awesome
• https://contao.org/en/extension-list...wesome.de.html

Für die neueste Version der Extension musst du allerdings die Paketverwaltung (Composer) benutzen.

[creativpoint]

Du kannst die FontAwesome Insert tags (zB {{fa:hone}}) verwenden (falls du die FontAwesome Extension benutzt).

• https://github.com/netzmacht/contao-font-awesome
• https://contao.org/en/extension-list...wesome.de.html

Für die neueste Version der Extension musst du allerdings die Paketverwaltung (Composer) benutzen.

Hallo,

falls jemand schlechte Erfahrungen mit dem Composer gemacht hat und dennoch die neusten Fonts von Fontawesome Version 4.5 nutzen möchte kann sich das ganz einfach updaten.

1. Einfach auf https://fortawesome.github.io/Font-Awesome/ gehen und das neue Paket downloaden.

2. In diesem Paket befindet sich der Ordner fonts.

3. Den Inhalt dieses Ordners einfach in den Ordner des Contao Modules: /system/modules/kit_fontawesome/assets/fonts ,rein kopieren.

4. Danach diesen Ordner öffnen: /system/modules/kit_fontawesome/modules

5. Dort befindet sich die Datei: ModuleFontAwesome.php ,diese Datei öffnen.

6. In dieser Datei einfach das hier suchen: protected $version = '4.3.0';

7. Einfach ersetzen mit protected $version = '4.5.0';

Das war es schon!

Und schon kann man die neuen Fonts inklusive dem Contao Font benutzen, z.B. wenn man das per insert Tag tun möchte.

z.B. {{fa::contao}} oder ganz neu {{fa::bluetooth}}

Anmerkung:

Bei mir funktioniert das einwandfrei mit der Standard ER von Contao, denn ich hatte mehrfach Probleme mit dem Composer und habe mich davon verabschiedet!

Wollte aber auch nicht auf die neuen Fonts bzw. Icons verzichten.

Übrigens läuft alles bei mir auf neuesten Contao Version 3.5.5

Hoffe es hilft einigen.

[MacKP]

<offtoppic>
@creativpoint
Wenn du mit composer so viele Probleme hast, dann melde die doch bitte, damit die behoben werden können. Auf dauer wirst du um den Composer nicht drum herum kommen.
Es wäre also schön, wenn du da dann helfen könntest, indem du deine Fehler meldest/beschreibst.

BTW: Ich arbeite schon seit längerem mit Composer und hatte damit bisher keine wirklichen Probleme. Der Bug letztens (Contao wird nachinstalliert) war zwar sehr ärgerlich, aber der erste Bug in der Art seit 2 Jahren.
Ansonsten hab ich höchstens Probleme mit den Hostern ;-)

Viele Grüße
</offtoppic>

[creativpoint]

<offtoppic>
@creativpoint
Wenn du mit composer so viele Probleme hast, dann melde die doch bitte, damit die behoben werden können. Auf dauer wirst du um den Composer nicht drum herum kommen.
Es wäre also schön, wenn du da dann helfen könntest, indem du deine Fehler meldest/beschreibst.

BTW: Ich arbeite schon seit längerem mit Composer und hatte damit bisher keine wirklichen Probleme. Der Bug letztens (Contao wird nachinstalliert) war zwar sehr ärgerlich, aber der erste Bug in der Art seit 2 Jahren.
Ansonsten hab ich höchstens Probleme mit den Hostern ;-)

Viele Grüße
</offtoppic>

Bei meiner letzten Webseite war es so das aus irgendeinem Grund keine Deinstallation von Erweiterungen möglich war oder Installationen wurden gemacht nur war diese im Backend nicht sichtbar dann Server Error 500

Habe bei Hosteurope einen V Server und nicht den kleinsten. Bin seit bestimmt 10 Jahre dort Kunde und nie Probleme.
Werde mal ne Seite kopieren und mit Composer parallel betreiben und wenn wieder Fehler auftreten diese melden.
Der Composer ist ja noch in der Betaphase.

Grüße aus Frankfurt

[lucina]

Ich habe hier ungefähr zwei Dutzend verschiedene HE-Produkte unter meinen Fittichen, ich kann das nicht nachvollziehen mit Ausnahme eines sehr kleinen Webpacks, das halt bald ein Jahrzehnt auf dem Buckel hat.

Bei den selbstgemanageten Webservern hast Du es ja selbst in der Hand, und bei den größeren Webpacks und Webservern (managed-Produkte) ist ja nun seit geraumer Zeit auch *.phar standardmäßig in der Suhosin-Whitelist enthalten. IMHO die einzige, dann aber auch nachhaltig störende Fehlerquelle ist da im Bereich Benutzerrechte vorhanden, wenn ein FTP-Account, der zum Hochladen benutzt wurde nicht im Kontext des Webservers läuft. Das kann man aber einstellen.

Wenn Du da 500er bekommst, dann kannst Du davon ausgehen, dass die auch auf anderen Systemen auftreten, die den Suhosin-Patch einsetzen und (ich hasse es wirklich) intransparent alles ab eine festgelegten Eingabelänge in die Tonne werfen. Auch dass kann man einstellen. Siehe dazu einfach mal in die Suhosin-Doku, die inzwischen etwas besser geworden ist.

Schlechte Erfahrungen sind im Regelfall in schlechter Konfiguration begründet ... ;-)

Ich setze auch gerne FontAwesome ein, lade mir das aber mit Composer. Dann befindet sich der Font und das CSS im Regelfall unter composer/vendor/components/font-awesome, und die kann ich mit einem Zweizeiler ins Layout einbinden (oder vielleicht auch Theme+ nutzen, dann braucht's den Zweizeiler gar nicht).

Der Vorteil ist, dass ich nichts selbst herunterladen, auspacken, hochladen oder kopieren brauche (also auch nichts vergessen kann) und entweder die Version via Composer festtackern oder auch beliebig auf eine neue Version updaten kann. Auch auf HE-Maschinen ... ;-)

[operatorone]

Hallo,

ich habe die Erweiterung über das ER installiert und im Seitenlayout auch die Quelle gewählt. Da ich aber LESS nutze habe ich Fontawesome auch so eingebunden. Meine über

::before

vergebenen Icons und auch

<i>

Tags werden alle sauber ersetzt. Nur die InsertTags nicht. Da erscheint auch im Quell-Text nichts. Hat dazu jemand eine Idee.

Viele Grüße,
operatorone

[operatorone]

P.S. Witzigerweise wird, wenn ich "Nicht laden" wähle, wird dies hier im HEAD eingebunden

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">