Web Tutorial Indonesia 
Dalam tutorial cara memasang dan menggunakan font awesome, kita akan mencoba untuk mengenal, memasang dan menggunakan font ini dalam template kita. Banyak para pengembang web yang menggunakan font ini kedalam proyek mereka, dan sekarang (mei 2015) font ini sudah di versi 4.3.0 dengan 519 total ikon. Apa saja keuntungan dan cara memasangnya?
Keuntungan Menggunakan Font Awesome
Dengan Font Awesome, kita bisa membuat ikon yang menarik dengan hanya menggunakan teks (tanpa gambar) sehingga bisa meningkatkan kecepatan blog. Dengan menggunakan Font Awesome, antarmuka website jadi lebih mudah diakses meskipun teks pada tombol dalam bahasa asing, dan juga membuat kita lebih mudah untuk memahami konten.
Nama Font Awesome menunjukkan bahwa itu adalah font (huruf), sehingga kita dengan mudah mengubah warna dan ukuran dengan bantuan dari skrip CSS. Hal yang paling penting adalah bahwa huruf berbentuk ikon ini bisa terlihat dengan baik pada setiap perangkat (bahkan pada layar retina).
Menggunakan Font Awesome merupakan salah satu usaha untuk merubah tampilan website atau blog menjadi menarik, untuk langkah lain-nya ikuti tutorial ” Cara Membuat Tampilan Blog / Website Menarik ” dan ” Cara Membuat Template Web Responsive HTML 5 “.
Cara Memasang Font Awesome ke HTML atau Template
Sebenarnya ada banyak cara memasang dan cara menggunakan Font Awesome pada template kita. Kita akan fokus pada yang paling mudah yaitu dengan menggunakan Bootstrap CDN. Pertama, kita harus mendapatkan link dari Font Awesome dengan mengunjungi alamat ” http://fortawesome.github.io/Font-Awesome/get-started/ ” dan salin link tersebut. Lebih jelasnya perhatikan gambar dibawah.
Salin Link di Area Hijau
Selanjutnya, kita perlu menemukan bagian kepala dari situs kita, caranya cari elemen head atau tag <head> dan tambahkan link berikut (Font Awesome V 4.3.0) sebagai sumber eksternal kedalam elemen head tersebut:
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
Jika anda menggunakan template wordpress, cara terbaik adalah dengan menggunakan fungsi wp_enqueue_style yang diletak-kan dalam file function.php. Contohnya sebagai berikut :
/**
* Proper way to enqueue styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
Sedangkan jika ingin diterapkan ke blogger atau blogspot, caranya persis seperti cara dibawah ini.
Cara Menggunakan Font Awesome ke HTML atau Template
Oke, saatnya kita mempelajari cara menggunakan font awesome. Daftar semua ikon yang tersedia dapat ditemukan di halaman Font Awesome Icons. Untuk belajar cara menggunakan font ini, mari kita buat dulu satu file HTML yang sekaligus kita tambahkan link Font Awesome seperti berikut.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<p>Halo, namaku nyekrip. Nyekrip adalah Web Tutorial Indonesia tentang cara membuat website,
blog dan aplikasi web sendiri gratis dengan HTML, CSS, Javascript, PHP, MySQL dan Lainnya.
</p>
</body>
</html>
Oke, sekarang mari kita lihat beberapa contoh ikon beserta nama kode-nya. Perhatikan gambar berikut.
Ikon Diamond
Mari kita ambil contoh dengan menggunakan ikon berlian, ikon tersebut memiliki nama diamond. Untuk memakai ikon tersebut kita cukup mengetik-kan class="fa fa-diamond", kata diamond disini diambil dari nama ikon tersebut dan atribut class ini dapat disertakan dalam elemen i atau lainnya. Sekarang kita coba dengan menambahkan ikon tersebut kedalam file HTML kita (class kita masuk-kan dalam elemen i). Maka skrip HTML kita menjadi seperti ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-diamond" style="font-size:100px;"></i>
<p>Halo, namaku nyekrip. Nyekrip adalah Web Tutorial Indonesia tentang cara membuat website,
blog dan aplikasi web sendiri gratis dengan HTML, CSS, Javascript, PHP, MySQL dan Lainnya.
</p>
</body>
</html>
Jika skrip diatas dijalankan, maka akan tampil seperti gambar dibawah ini:
Ikon Diamond
Jika kita ingin agar ikon diamond berputar, maka cukup tambahkan value fa-spin. Perhatikan skrip dibawah ini:
<i class="fa fa-diamond fa-spin" style="font-size:100px;"></i>
Untuk pengaturan lainnya, kita bisa mempelajari lagsung melalui halaman Font Awesome Examples. Dalam halaman tersebut, ikon bisa kita atur supaya berputar, dibalik, di beri border dan masih banyak lagi. Demikian tutorial memasang dan menggunakan Font Awesome.
Demikian tutorial cara memasang dan menggunakan font awesome, Perlu untuk diketahui jika pada versi sebelumnya (versi 3.2.1), Font Awesome mengalami perubahan pada kode pemanggilan ikon dan juga pada link dari Netdna menjadi MaxCDN, untuk itu sebelum memutuskan untuk update ikon, kita harus mempelajari lagi bagaimana cara pengambilan link dan pemanggilan ikon tersebut (takut-nya ada perubahan lagi).
Happy Nyekrip!
Pingback: Cara Memasang dan Menggunakan Font Awesome | abangdidi.com
Thx infonya bagus banget artikel nya nambah ilmu
Thankyou
BAGUS!!! GOOD JOB!!!
mau tanya bro, ada font awesome Kaskus gak ya?
wah baru denger gan, belum tahu. :)
Pingback: Cara Memasang dan Menggunakan Font Awesome | Meteorpost
Pingback: Cara Memasang dan Menggunakan Font Awesome | Portal Tricks
selain font awesome apa ya?
maksudnya? kalau yang dimaksud layanan serupa, saya belum tahu. :)
ion icon
Thx dah, berguna banget… tampilan jadi lebih elegan dan pastinya lebih enteng :D
Gan cara liat ikon ikon yg lebih banyak dimana ya?
ya di sumber pembuatnya gan di font awesome.. cari di google dengan kata kunci ” font awesome github ” :)
Terima Kasih Mantap Artikelnya
bang saya mau tanya, kalo cara menggunakannya di offline mode gimana bang ? udah download fontnya tapi gak nemu cara makenya. kalo cara di atas kan harus ada koneksi internet.
langsung saja download dan sambungkan seperti biasa.
link rel=”stylesheet” href=”alamat file css pada lokal komputer anda”
anjay dkeren bang tutorial beserta webnya :3 jadi pengen punya beginian
ayo gan kita ramaikan dunia blog biar semakin banyak yang terbantu :)
saya pas masukin selalu ada bacaan link …… itu kenapa
mantab artikelnya
kalo masang font awesome di title gimana gan,.
trimakasih
Saya baru menjelajahi blog ini dan ketemu artikel ini.. saya kira font awesome itu “font”, bukan “icon” :D Tapi keren min.. kalo cara masangnya di samping menu bisa gak?
Sangat bersolusi gan
Mantap tutorialnya. Tapi setelah saya tes di jigsaw.w3.org css-validator muncul error, katanya tidak valid CSS3.
Itu gimana cara ngatasinya gan?
Pada bagian mana?
Iwak begitu toh gan ane belum paham tp cara manggilnya
Ijin tanya gan untuk membuat Jenis icon disclaimer , about, contact, privacy policy, terms & Conditions gmn ya gan
Terimakasih.