Cara Membuat List-style-image Pada Menu Menggunakan Font-awesome

by | Feb 13, 2017 | Tutorial | 0 comments

Hallo teman – teman berjumpa lagi nih dengan saya pada artikel kali ini saya akan membahas tentang  , caranya cukup mudah dan gampang. Tentu teman – teman sering melihat sebuah menu dengan tampilan list-style-image disampingnya. Dalam hati teman – teman pasti bertanya gimana sih cara membuatnya…? Sebetulnya banyak sih cara untuk membuat List-style-image Pada Menu, namun pada tutorial saya kali ini, saya hanya akan membahas tentang Cara Membuat List-style-image Pada Menu Menggunakan Font-awesome. Kalau sebelumnya teman – teman cuman bisa menikmati hasil orang lain sekarang dengan bantuan tutorial saya ini teman – teman bisa membuat sendiri. Jadi teman – teman bisa bayangkan sendiri gimana rasanya bisa membuat menu dengan menggunakan font-awesome.

Tapi sebelum memulai membuat kita membutuhkan yang namanya filenya font-awesome, untuk mendapatkan file-nya font-awesome silahkan teman – teman download di http://fontawesome.io/ font-awesome-nya sekarang silahkan teman – teman download. karena kita akan menggunakan icon dari font-awesome. Kalau sudah silahkan teman – teman ektract dan save.

kalau sudah silahkan berikutnya kita akan membuat sebuah file HTML simpan file HTML-nya jadi satu dengan file font-awesome yang teman – teman download tadi. Biar mudah teman – teman menggunakannya karena kita akan memanggil font-awesome kedalam file HTML kita. Oke seperti biasa untuk membuat file HTML silahkan teman – teman siapkan dulu text-editornya, kalau sudah sekarang teman – teman silahkan  tuliskan script dibawah ini. se

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
  <li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>

</body>
</html>

kalau sudah silahkan teman save dan coba teman jalankan pada text editornya. maka hasilnya akn seperti dibawah ini

Cara Membuat List-style-image Pada Menu Menggunakan Font-awesome

oke cukup mudah bukan. oke itu lah tadi pembahasan saya tentang Cara Membuat List-style-image Pada Menu Menggunakan Font-awesome.

Â