Menggunakan Icon Font Awesome

Kali ini saya akan menjelaskan cara menggunakan font awesome untuk menampilkan icon.Icon adalah gambar kecil yang biasanya digunakan untuk menu. Aplikasi baik desktop maupun web tidak terlepas dengan namanya icon. Otak manusia lebih cepat mengenal gambar atau icon daripada membaca tulisan. Icon juga dapat menjelaskan lebih banyak daripada sebuah tulisan. Oleh sebab itu, icon banyak digunakan di aplikasi agar penggunanya mudah menemukan menu ataupun yang lain.

Bayangkan jika semua menu dituliskan dengan huruf-huruf atau kata, tentunya akan panjang sekali daftar menunya. Menu yang terlihat sangat banyak akan memusingkan pengguna aplikasi karena tidak menarik. 

Gambar atau icon tidak dengan tiba-tiba ada dan bisa digunakan. Icon sendiri dibuat oleh orang, sehingga biasanya icon memiliki hak cipta. Font awesome sendiri adalah icon untuk web yang tersedia gratis juga berbayar. Jika anda memilih yang berbayar berarti anda telah mendukung karya seseorang.

Jika anda menggunakan atau mendownload template bootstrap biasanya font awesome sudah lengkap disana. Tapi jika anda ingin memasang sendiri maka begini caranya.

Anda dapat mendowload melalui link dibawah tombol "Get More with Pro" berwarna hijau. Selanjutnya dapat di ekstrak di folder projek anda.


<!DOCTYPE html>
<html>
<head>
<title>Icon</title>
<link rel="stylesheet" type="text/css" href="fa/css/all.css">
</head>
<body>
<button><i class="fa fa-home fa-2x"></i> Home</button>
<button><i class="fa fa-plus fa-2x"></i> Tambah</button>
<button><i class="fa fa-edit fa-2x"></i> Edit</button>
<button><i class="fa fa-trash fa-2x"></i> Hapus</button>
<button><i class="fa fa-arrow-left fa-2x"></i> Kembali</button>
</body>
</html>

Anda hanya perlu memanggil all.css yang lokasinya disesuaikan dengan letak font awesome anda. Pada tutorial kali ini letakkan ekstrak font awesomenya di folder "fa". Kita dapat menggunakan icon di tag <i>, dengan class="fa fa-home" untuk menampikan icon home dan "fa-2x" untuk ukuran 2 kali lebih besar.


Jika anda tidak ingin mendownload font awesome, ubah link css nya seperti ini:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

Terima Kasih. Ngoding itu mudah 😀

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE