Hai Agan sista, pernahkah Anda merasa dalam me-load sebuah website bisa begitu berat dan lama? Selain internet Anda yang lambat, bisa jadi dalam website tersebut terdapat file yang jumlahnya banyak dan berukuran besar. Salah satu hal yang paling masif dalam penggunaan image pada website website lama yang membuat load page nya menjadi lelet adalah penggunaan icon menggunakan file gambar. Pada tutorial kali ini, kita akan mencoba, memasang, dan menggunakan font ini pada website kita.

Selain menggunakan Glyphicon, saat ini sudah banyak sekali developer website yang menggunakan Font Awesome, dan hebatnya lagi saat ini (versi terbaru 4.4.0 - bulan Agustus) sudah terdapat 585 icons, ngeri ngeri sedap.

Mengapa Menggunakan Font Awesome?

Selain load sebuah website menjadi lebih ringan, dengan menggunakan font kita bisa membuat sebuah icon yang menarik dan mudah di kostumisasi baik dari warna maupun ukurannya hanya menggunakan rule css.

Lalu Bagaimana Cara Kita memasang Font Awesome?

Sangat mudah, pertama kita harus mendapatkan link css dari Font Awesome nya dulu di http://fortawesome.github.io/Font-Awesome/get-started/ dan copy link yang ada pada halaman tersebut.


Bila sudah, sekarang kita tinggal menaruhnya pada bagian <head> HTML sebagai link eksternal. 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Ini Judul Page</title>
    <!-- CSS  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
Bila sudah, lanjut ke next step.

Cara Menggunakan Font Awesome Pada Blog, HTML, atau Template

Sekarang lanjut pada penggunaannya di HTML. Semua daftar nama icons ada di situsnya, nama itu nanti akan kita gunakan untuk class icon yang akan kita pasang. Langsung saja, pertama kita buat dulu sebuah file HTML sekaligus kita tambahkan link Font Awesome yang sudah kita pelajari di awal tadi. 
<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Ini Judul Page</title>
        <!-- CSS  -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    </head>
    <body>
        <p>Hayo, siapa di antara pembaca Jalu Blog's disini yang suka bersepeda</p>
    </body>
</html>
Sekarang, kita lihat lihat dulu gambar icon beserta code class nya yang akan kita gunakan. Perhatikan dulu gambar di bawah ini Gan sist.

Kita ambil contoh icon yang bergambar sepeda, pada gambar di atas icon tersebut bernama bicycle. Untuk menggunakannya, kita tinggal menuliskan saja nama tersebut pada class, misal class="fa fa-bicycle" pada tag element HTML <i>, jadi lebih lengkapnya akan jadi seperti ini:
<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Ini Judul Page</title>
        <!-- CSS  -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    </head>
    <body>
        <i class="fa fa-bicycle" style="font-size:200px;"></i>
        <p>Hayo, siapa di antara pembaca Jalu Blog's disini yang suka bersepeda</p>
    </body>
</html>
Bila kita jalankan script diatas, akan seperti ini hasilnya:

Bagaimana, Anda tertarik? Semoga bermanfaat.