Cara Menggunakan Font Awesome Icons

10 September 2016 | Tags: Font Awesome Icons, Icon website

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:

Buat halaman web sederhana.
Download Font Awesome dari situs resmi
Extract file tersebut dan akan terbentuk folder font awesome.
Pasangkan font awesome dengan menambahkan kode
<link rel=”stylesheet” href=”folder_font_awesome/css/font-awesome.min.css”>
diantara tag <head>…</head>
Untuk menggunakan icon, cukup tambahkan tag .
Misalnya untuk membuat icon home : .

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:

:
:
:

Untuk demo contoh cara menggunakan icon, klik disini