Hallo teman-teman, kali ini kita belajar bagaimana cara mengganti icon list dengan CSS. Untuk membuat list di HTML biasanya teman-teman akan menggunakan tag <ul> dan <li>. Tag ini akan membuat daftar list secara menurun. Namun icon list pada tag ini adalah berbentuk titik hitam bulat. Pada kesempatan kali ini kita akan mencoba mengganti icon titik bulat tersebut dengan gambar sesuai keinginan teman-teman.Teman-teman bisa ikuti contoh code dibawah ini.
list.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Bandrek</li>
</ul>
</body>
</html>Hasil default dari tag <ul> <li>
Hasil setelah dirubah iconya dengan gambar kotak
Iconnya berubah karena fungsi dari
list-style-image: url('sqpurple.gif');Sehingga icon yang tadinya titik hitam bulat diganti dengan sqpurple.gif. Teman-teman bisa menggunakan gambar lain sesuai keinginan.
Sekian pembahasan mengenai cara mengganti icon list dengan CSS. Semoga bermanfaat.
The post Cara Mengganti Icon List dengan CSS appeared first on Kursus Website Terbaik.