FontAwesome als list-style-type

  • Hallo,


    ich schon wieder mit einem neuen Problem. Diesmal was Kleineres.

    Ich versuche gerade, ein Font Awesome Icon als list-style-type zu verwenden mit ::before wie hier beschrieben.

    Diese Seite verwendet als font "Font Awesome 5 Free", ein anderes Tutorial nimmt "FontAwesome". Beides funktioniert bei mir nicht.

    Wie finde ich denn heraus, wie ich die Font benennen muss? In der all.css finde ich dazu nichts.

    Das Icon zig mal einzeln manuell einbinden find ich nicht so elegant. Ich hab's eben mal zum Schauen eingefügt.


    Link zur Seite

  • Mann, was würd ich ohne dich tun!

    In den Docs war ich sogar schon. Aber dass ich die font-weight extra angeben muss, hab ich nicht gerafft. Nachdem das ja beim Einbinden über i auch nicht der Fall ist.

    Danke!


    Und wieder dasselbe Spiel: Eine Lösung produziert ein neues Problem.

    Wohl durch das float:left ist es jetzt so, dass das ganze nicht mehr responsive ist. Ein clearfix kann ich ja an eine Pseudoklasse nicht dranhängen? Und ohne float geht's nicht, weil dann die zweizeiligen Items nicht schön eine Linie bilden.


    *grübel*

  • Der Text soll natürlich nicht verschwinden. Das float richtet das Icon nur schön links aus, was mit margin hier nicht geht, weil sonst die zweizeiligen Items nicht schön ausgerichtet sind.

    Mit Grid meinst du Icon und Text in 2 getrennte DIVs packen? Das wäre ja semantisch nicht passend.

    Normalerweise sollte das eine Liste bleiben, aber halt nix verschwinden. Am float liegt es aber wohl doch nicht, denn auch wenn ichs rausnehm, verschwindet die ganze Liste.

  • Zitat

    Mit Grid meinst du Icon und Text in 2 getrennte DIVs packen?

    Das habe ich nicht geschrieben und meine ich auch nicht.


    Zitat

    Normalerweise sollte das eine Liste bleiben

    Richtig, das sehe ich auch so.


    Zitat

    Am float liegt es aber wohl doch nicht, denn auch wenn ichs rausnehm, verschwindet die ganze Liste.

    Das steht ein display: none; im CSS.

  • Mir ist später noch eingefallen, dass das womöglich an der Navigation liegt. Da werd ich mal später mit einer Klasse nachhelfen.



    Was meintest du dann? Solang ich nur ein einfaches DIV hab (content), brauch ich doch eig weder eine Flexbox noch ein Grid. Mein DIV ist daher ein normales Blockelement. Das sollte für einen Absatz und eine Liste doch eigentlich reichen.

  • Wenn der Text nicht in einem DIV stehen soll, dann vl in einem Article?


    Ich war eben bis jetzt immer der Ansicht, Box und Grid geht nur mit Divs. Dass dem nicht so ist, hab ich erst gestern gecheckt (siehe Masonry). Dh UL kann eine Flexbox sein. Aber dann bräuchte man immer noch 2 Sachen. Die LI und die Punkte extra.

  • Zitat

    Aber dann bräuchte man immer noch 2 Sachen.

    Nein, unnötige Elemente nur für das Layout sind zu vermeiden.


    Ich schlage folgendes Vorgehen vor:


    Zunächst löscht du das float: left; bei dem Pseudoelement :before.


    Dann sucht du in der main.css nach


    Code
    1. .content li {
    2. margin-left: 3em;
    3. }


    Das muss so um Zeile 175 herum sein.


    Dort fügst du zwei Einträge hinzu:


    Code
    1. .content li {
    2. margin-left: 3em;
    3. display: flex;
    4. gap: 15px;
    5. }

    Speichern, fertig.


    gap regelt den Abstand zwischen before und dem eigentlichen Inhalt. Mit den 15px tut sich erst mal was, den Abstand kannst du natürlich nach deinen Wünschen ändern.


    Nachtrag: Grade noch gesehen: Dann kannst du direkt unter dem float auch gleich das armselige margin-left: -1.5em; löschen. Statt dessen dann das margin-left: 3em; beim li-Element etwas verkleinern.

  • Ah, das ist interessant! Wieder was gelernt. Wusste nicht, dass das so auch gehen könnte. Bis jetzt kenn ich Flexbox mit unterschiedlichen Elementen. Aber LI ist ja ein Element, wobei hier wohl das :before als eigenes Element angesehen wird.

    Man lernt eben nur durch Ausprobieren und Fragen...und die Fuchsereien. ;-)


    Noch was.

    Dass die ganze Liste verschwindet, liegt tatsächlich an der Nav. Offensichtlich, nur hab ich das gestern im müden Zustand nicht mehr gerafft.

    Das Komische daran ist aber, dass in der nav.css wirlich alle ul li als nav ul li definiert sind und in der main.css .content ul li. Dennoch tut der Browser so als wäre da nur ein allgemeines ul livorhanden, das für alle gilt.

    Das ist mir schon aufgefallen, als ich die Sticky-Variante der Navigation erstellt hab - ich hab überall erstmal zusätzlich nav.sticky hinzufügen müssen. Obwohl ja, wenn dann durch JS im HTML class="sticky" hinzugefügt wurde, es ja immer noch eine nav ist. Meiner Logik nach müsste doch ein CSS-Style, der für NAV definiert ist, auch für alle seine Unterklassen (nämlich nav.sticky) zutreffen, wenn in .sticky nichts anderes definiert wurde.

    Warum?

    nav ul sind ja alle UL, die sich innerhal von NAV befinden. nav>ul wären alle UL, die NAV als direktes Elternelement haben.


    Nachtrag: Ein einziges ul in der nav.css hatte kein nav ul

    Code
    1. .show + a, nav ul{
    2. display: none;
    3. }



    Die Konsole behautpet auch, ich hätte auf Zeile 182 in der main.css folgendes stehen:


    Das stimmt aber überhaupt nicht. Tatsächlich hab ich hier nur

    Code
    1. .content li {
    2. display:flex;
    3. gap:1rem;
    4. margin-left:3rem;
    5. }


    Den Rest hier habe ich in der .card stehen und meine Liste steht ja nicht einmal innerhalb einer Card.


    Warum behauptet der Browser dann so komische Sachen?