Jak wstawić obrazek do listy ul li, zamiast standardowych znaczników?

list style image
You are currently viewing 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

Subscribe
Powiadom o
guest

0 komentarzy
Inline Feedbacks
View all comments