Cara Mengganti Icon List dengan CSS
Hallo teman-teman, kali ini kita belajar bagaimana cara mengganti icon list dengan CSS. Bagi merancang list di HTML biasanya teman-teman akan menggunakan tag <ul> dan <li>. Tag ini akan merancang daftar list secara menurun. Namun icon list di tag ini yakni berbentuk titik hitam bulat. Di kesempatan kali ini kita akan mencoba mengganti icon titik bulat tersebut dengan gambar sesuai keinginan teman-teman.Teman-teman dapat 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 guna dari
list-style-image: url('sqpurple.gif');Sehingga icon yang tadinya titik hitam bulat diganti dengan sqpurple.gif. Teman-teman dapat menggunakan gambar lain sesuai keinginan.
Demikian pembahasan mengenai cara mengganti icon list dengan CSS. Semoga bermanfaat.
Sumber https://kursuswebsite.org
