contao-font-awesome-inserttag für Listen

Druckbare Version

06.03.2018, 16:23
Claudi

contao-font-awesome-inserttag für Listen

Hallo zusammen,

benutze für ein Projekt (Contao 4.4.14) die Erweiterung https://packagist.org/packages/netzm...some-inserttag und würde gerne als Listen-Symbol ein FontAwesome Icon verwenden.

Im <head> ist

Code:

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

eingebunden.

Schreibe ich im Stylesheet:

Code:

li:before { margin:0 5px 0 10px; font-family:FontAwesome; color:#000; content:'\f35a'; }

bekomme ich nur dieses "Icon-nicht-gefunden-Symbol" :rolleyes: angezeigt.

Schreibe ich im Stylesheet:

Code:

li:before { margin:0 5px 0 10px; font-family:FontAwesome; color:#000; content:'{{far::fa-arrow-alt-circle-right}}'; }

wird folgendes ausgegeben:
<i class="far fa-fa-arrow-alt-circle-right" aria-hidden="true"></i>Aufzählung 1
<i class="far fa-fa-arrow-alt-circle-right" aria-hidden="true"></i>Aufzählung 1

Das "<i class="far fa-fa-arrow-alt-circle-right" aria-hidden="true"></i>" lässt sich nicht markieren. Komisch ist auch, dass hier "fa-fa-" ausgegeben wird.

Was mache ich hier falsch?

Grüße,
Claudi
06.03.2018, 16:48
fiedsch

Hast Du schon mal

Code:

{{far::arrow-alt-circle-right}}

anstelle

Code:

{{far::fa-arrow-alt-circle-right}}

probiert? (~~und laut https://github.com/netzmacht/contao-...some-inserttag sollte es "fa::" und nicht "far::" sein~~).

Ich kenne das Paket nicht, aber ich nehme an, damit bist Du das doppelte "fa-fa" los.

Zitat:

bekomme ich nur dieses "Icon-nicht-gefunden-Symbol" angezeigt.

Du hast Font-Awesome als Schrift aber auch geladen? Oder nur in der CSS-Regel verwendet?
06.03.2018, 17:01
jk1

Hi,

deine erste Herangehensweise ist schon korrekt. Aber schau mal hier: https://fontawesome.com/how-to-use/s...seudo-elements

Die <i>'s werden ja alle durch <svg>'s ersetzt. Wenn auch die Pseudo-Elemente (after, before) durchsucht werden sollen, musst du folgendes machen:

HTML-Code:

<script> FontAwesomeConfig = { searchPseudoElements: true }; </script>

edit: Und die Schriftart muss auch angepasst werden: Font Awesome 5 Solid oder Font Awesome 5 Regular oder Font Awesome 5 Light oder Font Awesome 5 Brands

BG
07.03.2018, 10:05
Claudi

Vielen Dank jk1 - so funktionierts!

Das Paket https://packagist.org/packages/netzm...some-inserttag hat mit meinem Vorhaben nichts zu tun, ich will ja die Standard-Bullets ersetzen.

Wichtig ist noch das display:none;

Code:

li:before { display:none; font-family:"Font Awesome 5 Solid"; color:#000; content:"\f35a"; }

Abstände reguliert man dann über .svg-inline--fa

Code:

ul .svg-inline--fa { margin-right:10px; margin-left:5px; }
18.05.2019, 16:08
Shania

Zitat:

Zitat von Claudi

Vielen Dank jk1 - so funktionierts!
Das Paket https://packagist.org/packages/netzm...some-inserttag hat mit meinem Vorhaben nichts zu tun, ich will ja die Standard-Bullets ersetzen.

Auch ich habe das Paket in Contao 4.4 installiert und die Icons sind auch in den Texten und im Code, wo ich sie verwendet hatte, da.

Nun möchte auch ich FA 4 in CSS verwenden. FA liegt lokal auf dem Webspace. In 3.5 hatte das noch hiermit geklappt:

Code:

#start .ce_text ul li.icon-double-angle-right:before { content: "\f101"; /* FontAwesome Unicode */ font-family: FontAwesome; display: inline-block; color: #c45d34; }

Jetzt werden die Icons nicht mehr angezeigt. Hat da jemand eine Idee woran das liegen könnte?
19.05.2019, 15:47
Shania

Ich habe es gefunden. In Contao 4.4 ist der Artikelalias nicht mehr als CSS Klasse verwendbar. So fehlte hier einfach die richtig Klasse. Ich habe sie nun beim Artikel eingetragen und alles ist wieder schick :) .
19.11.2019, 07:28
habicht1879

Guten Tag

Ich habe das FA inserttag Plugin bei mir installiert, um in Überschriften Icons einzubinden.
Dies funktioniert soweit auch, aber leider nur bei einigen Icons.

Verwende ich z.B {{fa::folder}} wird es korrekt angezeigt.

Code:

<svg class="svg-inline--fa fa-folder fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="folder" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">

Möchte ich aber das Facebook Symbol mit {{fa::facebook-square}} einbinden, wird nur ein Fragezeichen angezeigt.

Code:

<svg class="svg-inline--fa fa-facebook-square fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="facebook-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">

Hat jemand eine Idee, was da nicht funktioniert?
19.11.2019, 13:57
Shania

Bei mir funktionieren beide Icons in der Überschrift :). Ich wusste gar nicht, dass das mittlerweile geht. Da konnte ich bei mir jetzt gleich einige Überschriften ändern, denn früher funktionierte es bei mir auch nicht.

Ich bin noch auf 4.4.43 und nutze contao-font-awesome-inserttag 2.0.1.

Vielleicht hilft dir das.
20.11.2019, 10:25
habicht1879

Zitat:

Zitat von Shania

Bei mir funktionieren beide Icons in der Überschrift :). Ich wusste gar nicht, dass das mittlerweile geht. Da konnte ich bei mir jetzt gleich einige Überschriften ändern, denn früher funktionierte es bei mir auch nicht.

Ich bin noch auf 4.4.43 und nutze contao-font-awesome-inserttag 2.0.1.

Vielleicht hilft dir das.

Ahhh, ich Dödel! Ich hatte ja gar nicht das contao-font-awesome-inserttag Plugin installiert, sondern nur das contao-font-awesome :D
Jetzt funktioniert es auch bei mir. Auch mit dem entsprechenden Prefix.

Danke für deinen Hinweis
20.11.2019, 10:30
Shania

Freut mich, wenn ich damit helfen konnte :) . Das kommt selten genug vor :D .