Contao-Camp 2024
Ergebnis 1 bis 10 von 10

Thema: contao-font-awesome-inserttag für Listen

  1. #1
    Contao-Nutzer Avatar von Claudi
    Registriert seit
    14.07.2009.
    Beiträge
    55

    Standard 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" 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

  2. #2
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    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.

    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?
    Geändert von fiedsch (06.03.2018 um 17:55 Uhr)
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  3. #3
    Contao-Nutzer
    Registriert seit
    14.03.2012.
    Ort
    Berlin
    Beiträge
    225

    Standard

    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
    Geändert von jk1 (06.03.2018 um 18:05 Uhr)

  4. #4
    Contao-Nutzer Avatar von Claudi
    Registriert seit
    14.07.2009.
    Beiträge
    55

    Standard

    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;
    }

  5. #5
    Contao-Fan
    Registriert seit
    20.06.2009.
    Beiträge
    563

    Standard

    Zitat Zitat von Claudi Beitrag anzeigen
    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?
    Viele Grüße
    Shania

  6. #6
    Contao-Fan
    Registriert seit
    20.06.2009.
    Beiträge
    563

    Standard

    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 .
    Viele Grüße
    Shania

  7. #7
    Contao-Nutzer
    Registriert seit
    08.07.2014.
    Beiträge
    28

    Standard

    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?

  8. #8
    Contao-Fan
    Registriert seit
    20.06.2009.
    Beiträge
    563

    Standard

    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.
    Viele Grüße
    Shania

  9. #9
    Contao-Nutzer
    Registriert seit
    08.07.2014.
    Beiträge
    28

    Standard

    Zitat Zitat von Shania Beitrag anzeigen
    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
    Jetzt funktioniert es auch bei mir. Auch mit dem entsprechenden Prefix.

    Danke für deinen Hinweis

  10. #10
    Contao-Fan
    Registriert seit
    20.06.2009.
    Beiträge
    563

    Standard

    Freut mich, wenn ich damit helfen konnte . Das kommt selten genug vor .
    Viele Grüße
    Shania

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •