Cara Membuat List Style Image FontAwesome Di CSS

Pada kesempatan kali ini saya akan menjelaskan cara membuat list style image fontawesome di css. Perlu teman-teman ketahui sebelumnya, untuk membuat list style tidak hanya bisa menggunakan gambar saja, namun teman-teman juga bisa menerapkan list style dengan icon fontawesome. Mungkin sebagian dari teman-teman sudah terbiasa menggunakan list style bawaan css atau sudah terbiasa memasang list style image dalam bentuk gambar icon.

Dan pada penjelasan kali ini saya akan memberikan contoh cara membuat list style image fontawesome di css dengan memanfaatkan icon fontawesome, dimana dari tehnik ini tentunya lebih praktis dan fleksible, dikarenakan ketika kedepannya teman-teman ingin mengganti jenis icon tersebut maka tidak perlu membuat gambar icon baru, cukup menggunakan icon fontawesome, karena dari fontawesome sendiri menyediakan Unicode dari masing-masing icon yang tersedia. Langsung saja untuk membuatnya kalian bisa ikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya :

Terlebih dahulu teman-teman buat satu buah file dengan nama index.html
Jika sudah selanjutnya ketikan seperti kode dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Membuat List Style Image FontAwesome Di CSS</title>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<style>
	.container{
		width: 70%;
		margin: auto;
		padding: 20px;	
		border: 1px solid #ddd;
	}
	ul li {
	    position: relative;
	    list-style: none;
	    margin-top: 10px;
	    margin-left: 60px;
	}
	ul li:before {
		content: "\f07b";
		font-family: FontAwesome;
		display: inline-block;
		margin-left: -1.3em;
		width: 1.3em;
	}
</style>
<body>
<div class="container">
	<ul>
		<li>List Satu</li>
		<li>List Dua</li>
		<li>List Tiga</li>
		<li>List Empat</li>
		<li>List Lima</li>
		<li>List Enam</li>
		<li>List Tujuh</li>
		<li>List Delapan</li>
		<li>List Sembilan</li>
		<li>List Sepuluh</li>
	</ul>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Cara Membuat List Style Image FontAwesome Di CSS</title>

</head>

<style>

.container{

width: 70%;

margin: auto;

padding: 20px;

border: 1px solid #ddd;

}

ul li {

position: relative;

list-style: none;

margin-top: 10px;

margin-left: 60px;

}

ul li:before {

content: "\f07b";

font-family: FontAwesome;

display: inline-block;

margin-left: -1.3em;

width: 1.3em;

}

</style>

<body>

<ul>

<li>List Empat</li>

<li>List Tujuh</li>

<li>List Delapan</li>

<li>List Sembilan</li>

<li>List Sepuluh</li>

</ul>

</div>

</body>

</html>

Jika sudah sebelumnya simpan terlebih dahulu file index.html tersebut dan lihat hasilnya di browser kalian.

Sampai disini penjelasan saya mengenai cara membuat list style image fontawesome di css, semoga bermanfaat.

Berikut Tahapannya :

Facebook DUMET School

Categories