CSS Befehl :before

    • Official Post

    ich würde gerne einigen Links ein paar Icons vorweg stellen, aber habe vergessen wie man den :before Befehl nutzt.

    Wichtig hierbei ist, dass der Doppelpunkt vor dem before in doppelter Ausführung existieren muss beispiel::before.


    hier geht explizit darum einen speziellen Link anzusteuern, so etwas wie in der Navigation "Home" .

    Code
    .mainMenu .boxMenu > li:nth-child(1) > a > span::before {
        content: "XYZ";
        font: 'FontAwesome'
    }

    Der Code welcher bei "Content" eingefügt werden muss, kann aber auf der Website von FontAwesome eingesehen werden.

    Mit freundlichen Grüßen / With best regards,

    SgtKaneki


    KEIN SUPPORT VIA PRIVATER NACHRICHT (KONVERSATION) / NO SUPPORT VIA PRIVATE MESSAGE (CONVERSATION)

  • Hallo,

    ich habe mal zwei Fragen dazu:


    1. Kann ich den Code bei einem Stil in den erweiterten Einstellungen reinsetzen?

    2. Du hast unten geschrieben, dass der Code bei Content eingefügt werden muss. Muss ich das im FTP-Programm machen, und wenn ja, im Content des jeweiligen Stiles?

    Und dann doch noch eine dritte Frage: Welche Links genau werden dort angesprochen? Die im obigen Menü? Kann man das auch mit den Footerlinks machen?


    Sorry, für die Fragen, aber ich bin, was das angeht ein absoluter Newbie und habe zudem immer mit der Angst zu kämpfen, irgendwas zu "zerschießen".


    Viele Grüße Wishes

    • Official Post

    1. Kann ich den Code bei einem Stil in den erweiterten Einstellungen reinsetzen?

    Korrekt, nur dort kann und sollte CSS Code platziert werden.


    2. Du hast unten geschrieben, dass der Code bei Content eingefügt werden muss. Muss ich das im FTP-Programm machen, und wenn ja, im Content des jeweiligen Stiles?

    Mit "Content" war in dem Fall Zeile 2 des obigen Codes gemeint, CSS-Änderungen via FTP sollten nicht durchgeführt werden, da diese unter Umständen weder korrekt gespeichert werden, noch können dadurch andere Teile des Originalcodes durcheinander geraten und Fehler verursachen. Also hier, wie bei der ersten Frage, nur in der Stil-Bearbeitung, "Erweiterte Einstellungen" CSS Code platzieren.


    Und dann doch noch eine dritte Frage: Welche Links genau werden dort angesprochen? Die im obigen Menü? Kann man das auch mit den Footerlinks machen?

    Es werden nur die Links im Hauptmenü angesprochen (CSS Klasse .mainMenu), wenn die Footerlinks zusätzlich angesprochen werden sollen, wäre hierfür die Klasse .boxesFooter .boxMenu > li > a { der richtige "Ansprechpartner".


    Sorry, für die Fragen, aber ich bin, was das angeht ein absoluter Newbie und habe zudem immer mit der Angst zu kämpfen, irgendwas zu "zerschießen".

    Keine Sorge, Fragen kann man immer :) Bei CSS gilt grundsätzlich, es kann natürlich etwas nicht so funktionieren wie man gerne hätte, dann einfach den jeweiligen Code (der eingefügt wurde) wieder entfernen und man hat den vorherigen Zustand zurück, dort besteht also keine wirkliche Gefahr etwas dauerhaft zu schädigen.

  • Ich muss nochmal nachfragen. Dies wäre dann der korrekte Code für die Footer-Links?


    .boxesFooter.boxMenu > li > a >span::before {


    content: "XYZ";


    font: 'FontAwesome'


    }


    Oder habe ich mir da wieder was zurechtgesponnen? :S