Sebelumnya dalam membuat icon di website, kita harus menyediakan gambar yang nantinya mau dijadikan icon. Semakin banyak ragam yang kita inginkan, semakin banyak pula icon yang harus dibuat atau disediakan. Kini kita bisa dengan mudah membuat icon dengan menggunakan Font Awesome Icons.

Font Awesome  menggunakan icon website dalam bentuk vector. Prinsip dari Font Awesome seperti halnya  penggunaan font face secara umum yang bisa diatur style-nya dengan css. Sehingga warna, ukuran, bisa diubah dengan mudah. Dengan menggunakan Font Awesome Icons seperlunya, website anda akan terlihat lebih menarik.

Sampai saat tulisan ini dibuat, versi terbaru dari Font Awesome adalah 4.6.3 dengan jumlah icon 634. Memiliki berbagai kelebihan seperti:

  • Mudah digunakan
  • Bisa diintegrasikan ke template website
  • Compatible dengan Bootstrap.
  • Fully open source, artinya anda bisa menggunakannnya untuk keperluan komersil,  open source projects, dan sebagainya
  • Dokumentasi yang lengkap dan mudah dimengerti

Langkah-Langkah Cara Menggunakan Font Awesome Icons:

  1. Buat halaman web sederhana.
  2. Download Font Awesome dari situs resmi
  3. Extract file tersebut dan akan terbentuk folder font awesome.
    fa_icon
  4. Pasangkan font awesome dengan menambahkan kode
    <link rel=”stylesheet” href=”folder_font_awesome/css/font-awesome.min.css”>
    diantara tag  <head></head>
  5. Untuk menggunakan icon, cukup tambahkan tag <i class=”fa jenis-icon“></i>.
    Misalnya untuk membuat icon home : <i class=”fa fa-home” aria-hidden=”true”></i>.

Source Code Cara Menggunakan Font Awesome Icons:

<html>
<head>
<title>Font Awesome</title>
<link rel="stylesheet" href="fa/css/font-awesome.min.css">
</head>
<body>
<h2><i class="fa fa-bar-chart"></i> Statistik data penjualan</h2>
</body>
</html>

Berikut contah penggunaan Font Awesome Icons:

  • <i class=”fa fa-home” aria-hidden=”true”></i> :
  • <i class=”fa fa-bar-chart” aria-hidden=”true”></i> :
  • <i class=”fa fa-recycle” aria-hidden=”true”></i> :

Untuk demo contoh cara menggunakan icon, klik disini


Komentar via Facebook tentang Cara Menggunakan Font Awesome Icons

Komentar tentang Cara Menggunakan Font Awesome Icons

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Your email address will not be published. Required fields are marked *