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.

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.

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

.show + a, nav ul{
    display: none;
  }

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

.content li {
    position: relative;
    display: block;
    min-width: 0;
    word-wrap: break-word;
    background-color: #FFFFFF;
    background-clip: border-box;
    border: none;
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.3);
    border-radius: 0;
    padding-bottom: 10px;
    margin-bottom: 20px;

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

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

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?