Tutorial Web Design

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.

Daftar Icon yang disediakan font awesome

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