Jak wstawić obrazek do listy ul li, zamiast standardowych znaczników?
Można poprawić wygląd strony na wiele sposobów. Jednym z nich jest zmiana standardowych znaczników listy ul li, na obrazki. Często widzi się na stronach listę wypunktowaną, punkty jako kółka, kwadraty, liczby. Chcąc dodać trochę bajeru do strony, można zamiast nich wstawić obrazek, ikonkę .jpg, .gif czy .png i ciekawie wyróżnić listę.
Dodajemy kod html między <body></body>
<ul>
<li>Strona główna</li>
<li>O nas</li>
<li>Realizacje</li>
<li>Galeria</li>
<li>Kontakt</li>
</ul>
Jest to kod listy o zawartości 5 elementów. Może to być menu, czy lista usług.
Dodajemy style listy w pliku .css
li {
list-style-type: none;
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
}
li::before {
content: "";
display: inline-block;
width: 32px;
height: 32px;
background-image: url("obrazek.png");
margin-right: 15px;
vertical-align: middle;
}
Podmieniamy nazwę obrazka na własną, w linii: background-image: url(„obrazek.png”);
To wszystko! Krótki i prosty kod. Oto efekt:
Polecam serwis z ciekawymi ikonkami: https://www.flaticon.com
