id= in den ul tag

[Oliver Georgi]

Vergleiche einfach den Standard. Dann erklärt sich das von selbst. Und häufig hilft es, eigenes CSS zu benutzen oder das vorhandene zu adaptieren. Nicht immer sind solche Dinge 1:1 anwendbar. Weiß nicht, wo Du das wieder ausgegraben hast. Auch NIE den am Ende vom Browser verfügbaren Code nach JavaScript-Rendering kopieren!

Ob das jetzt side-nav heißt oder auf List-Group basiert, ist egal. Nimm das normale Bootstrap Drowpdown/Collapse und gut ist. Dann wird lediglich den Hauptmenüpunkten das float:left entzogen, und zack ist es erledigt. Dafür würde ich aber eine Klasse in einem Elternelement benutzen.

Code: Select all

<nav class="side-nav">
   {NAV_LIST_UL:…}
</nav>

Das Symbol vor dem Link kann man mit dem Parameter wrap_link_text(<em>|</em>), einfließen lassen, da es aber auch schlicht mit CSS geht, würde ich es einfach der Link-Klasse zufügen.

Code: Select all

a:before {
   font-family: FontAwesome;
   content: "\f105";
   display: inline-block;
}

[juergen]

Wer - wie ich - von gestern ist, kann sich hier in die font-awesome Definition einlesen: http://astronautweb.co/snippet/font-awesome/

Ich dachte gerade, ich hätte 200 Jahre CSS Entwicklung verpasst

das erklärt dann auch die Krypten hinter der content: Anweisung

[Oliver Georgi]

…kann sich hier in die font-awesome Definition einlesen: http://astronautweb.co/snippet/font-awesome/

Etwas outdated, direkt auf die http://www.fontawesome.io gehen bzw. die wirklich aktuelle Übersicht der Unicode-Icon-Zuordnung findet man hier: https://github.com/FortAwesome/Font-Awe ... ables.less

[top]

Ich nutze gerne http://fontello.com/ um mir einen kleinen, schlanken Font zu basteln, der nur die Icons enthält welche ich auch wirklich benötige. Da kann ich dann auch die einzelnen Icons individuelle Zeichen zuweisen. (Z.B. "f" für das Facebook-Icon.)
Zusätzlich kann man auch eigene Vektorgrafiken ergänzen.

Leider musste ich letztens feststellen, dass die vertikale Ausrichtung bei der Generierung der verschiedenen Font-Formate nicht ganz einheitlich ist. Das Problem konnte ich aber umgehen, indem ich die erzeugte TTF noch mal durch den Generator bei http://www.fontsquirrel.com/tools/webfont-generator gejagt habe.

[nameless1]

icomoon.io

[update]

Nimm das normale Bootstrap Drowpdown/Collapse und gut ist. Dann wird lediglich den Hauptmenüpunkten das float:left entzogen, und zack ist es erledigt.

Nun ja, war dann doch nicht so "zack" erledigt. Keine Ahnung, wo da das Detail saß/sitzt.
Erst als ich mir was ganz eigenes zu bauen begann, wurde es gut - und ist es jetzt auch...