Nečíslovaný zoznam s ikonami za použitia font Awesome

Nečíslované zoznamy sa využívajú predovšetkým ako odrážky, ale taktiež sa vo veľkom využívajú ako menu či už vertikálne alebo horizontálne.

Ako prvé si načítame font Awesome na stránku pomocou linkovania externých zdrojov do hlavičky stránky nasledovne:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Potom si vytvoríme nečíslovaný zoznam:

<ul>
    <li>položka</li>
    <li>položka</li>
    <li>položka</li>
</ul>

Do CSS súboru vynesieme pravidlá a vlastnosti, ktoré nám tento zoznam upravia.

ul{
    list-style: none; /* odstránanie predvolených guličiek ako odrážok */
    margin: 0; /* odstránenie nadbytočného osadenia */
    padding: 0; /* odstránenie nadbytočného vnútorného priestoru */
}

ul li{
    position: relative; /* relatívna pozícia pre určenie pozície detských prvkov vzhľadom k rodičovi */
    padding-left: 16px; /* rozšírenie vnútorného priestoru vľavo */
    margin: 8px 0; /* osadenie položky */
}

ul li:before{ /* pseudoelement každej položky zoznamu */
    content: "\f105"; /* znak definujúci, že sa jedná o šípku */
    font-family: 'Font Awesome\ 5 Free'; /* definovanie písmovej sady */
    font-weight: 900; /* určenie hrúbky písma - pre zobrazenie tejto konkrétnej značky je to nutné */
    position: absolute; /* absolútna pozícia k najbližšiemu nadradenému elementu s relatívnou pozíciou */
    top: 2px; /* osadenie z vrchu o 2px */
    left: 0; /* zarovnanie naľavo */
    color: #2eb766; /* určenie odtieňu zelenej farby */
}

Ak chceme dosadiť taktiež vnorené zoznamy ako:

kód upravíme nasledovne:

<ul>
    <li>položka</li>
    <li>položka
        <ul>
            <li>položka</li>
            <li>položka</li>
            <li>položka</li>
            <li>položka</li>
        </ul>
    </li>
    <li>položka</li>
    <li>položka</li>
</ul>
ul{
    list-style: none; /* odstránanie predvolených guličiek ako odrážok */
    margin: 0; /* odstránenie nadbytočného osadenia */
    padding: 0; /* odstránenie nadbytočného vnútorného priestoru */
}

ul ul{
    margin-left: 16px; /* osadenie druhej a vyššej úrovne vnoreného zoznamu */
}

ul li{
    position: relative; /* relatívna pozícia pre určenie pozície detských prvkov vzhľadom k rodičovi */
    padding-left: 16px; /* rozšírenie vnútorného priestoru vľavo */
    margin: 8px 0; /* osadenie položky */
}

ul li:before{ /* pseudoelement každej položky zoznamu */
    content: "\f105"; /* znak definujúci, že sa jedná o šípku */
    font-family: 'Font Awesome\ 5 Free'; /* definovanie písmovej sady */
    font-weight: 900; /* určenie hrúbky písma - pre zobrazenie tejto konkrétnej značky je to nutné */
    position: absolute; /* absolútna pozícia k najbližšiemu nadradenému elementu s relatívnou pozíciou */
    top: 2px; /* osadenie z vrchu o 2px */
    left: 0; /* zarovnanie naľavo */
    color: #2eb766; /* určenie odtieňu zelenej farby */
}