Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.

Erweiterte Navigation 1: HTML und FontAwesome

Erweiterte Navigation 1: HTML und FontAwesome – Tutorial zu CSS

Aus dem Kurs: CSS: Responsive Flexbox-Layouts für Profis

Gratismonat starten Für Ihr Team erwerben

Erweiterte Navigation 1: HTML und FontAwesome

“

In der erweiterten Navigation, erweitert mit Icons und Text oder auf Englisch "advanced", da geht es um Flexbox-Verschachtelung, es werden also mehrere Flexboxen ineinander stehen, denn sowohl das Menü selbst soll geflext werden, als auch die einzelnen Menüpunkte. Hier soll erreicht werden, dass das erste Wort jeweils neben dem Icon steht, in der gleichen Größe und da drunter etwas kleiner und kursiv der Rest des Satzes. Das soll dann in etwa so aussehen, das große Icon, das erste Wort daneben und darunter in kursiv jeweils der Rest des Satzes. Das ist unsere Ausgangsposition, und im Editor sieht das Ganze so aus: Hier ist "nav-advanced.html". Ich habe die entsprechenden Dateien in den Übungsordner kopiert. Es ist eine ganz normale HTML-Seite, genau wie bei der einfachen Navigation, einzige Neuerung ist hier ein Link zum "bootstrapcdn.com/font-awesome" Stylesheet. Das ist die einfachste Art, um diese Icon-Fonts von "Font Awesome" auf "fontawesome.io" einzubinden. Man kann die auch…

Inhalt