Seringkali dalam membuat website, kita memerlukan icon untuk memberikan gambaran lebih jelas dan mudah ditangkap oleh pengguna website. Berikut ini font berbentuk icon yang bisa digunakan untuk melengkapi tampilan website Anda.
Cara menggunakannya mudah sekali, tidak perlu menginstall atau download apa-apa. Gunakan CDN yang sudah disediakan oleh pembuat font ini:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
atau
Bila Anda ingin menggunakan font ini di localhost silahkan download font ini di sini. Setelah itu copy-kan pada direktori website dan panggil css font awesome ini pada bagian < head > website Anda.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Dan silahkan pilih berbagi icon yang disediakan font ini untuk dipasang pada website Anda.
Masih bingung dengan apa yang dimaksud, baiklah… berikut saya berikan beberapa tampilan yang menunjukkan penggunaan font ini dalam beberapa komponen website.
Pada menu navigasi di bagian header website:
Kode html yang digunakan:
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
<li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
</ul>
Bisa dilihat pada kode diatas untuk menampilkan icon kita cukup menentukan class sesuai dengan kode dari masing-masing icon .fa fa-book fa-fw
Tombol dengan icon di dalamnya:
Kode html yang digunakan:
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.0.3</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
Nah, mudah bukan untuk menggunakannya?
Kelebihan lain yang saya sukai adalah icon ini bisa di-style menggunakan css seperti halnya font pada umumnya. Asik bukan, ingin merubah warna tinggal diberi color, merubah ukuran tinggal kasih font-size, diberi shadow juga bisa. Mantab dah !!!
Okay, sekian sharing singkat saya.
Salam
Mantap dan simple nih tutorial,, makasih mas,,
bermanfaat bro, thanks
bsa lebih rinci g’ gan,.,
Thanks
keren nih mas bro…berguna sekali tutorialnya bagi saya yang masih awam soal beginian…
bisa kasih saran gak buat template yg saya gunkan di blog saya…
ya biyar codenya clean trus loadingnya bisa cepet gtu.. :D :D
coba visit ajj bang.. :D :D
thanks… :)
sangat membantu tutorialnya
[…] Disitu terlihat kalau kita menggunakan class fa fa-search fa-4x untuk menampilkan icon pencarian, yang dibungkus dengan sebuah div dengan ID #searchtoggl. Agar icon tersebut muncul kita terlebih dahulu menyertakan kode css dari font awesome di bagian head website. Anda bisa membaca penggunaan font awesome ini secara singkat di artikel Tulisan Berbentuk Icon Untuk Desain Website. […]
kok link not found 404
kak font nya kok nggak bisa di download yak.
yang ada disini : http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.0.3.zip
Kalau tidak bisa kamu bisa download disini – http://fortawesome.github.io/Font-Awesome/
Link downloadnya broken gan mohon perbaiki. Soallnya ane mau download
Jos.. mantap gan,