Mempercepat loading website dengan menggunakan Fontawesome

Para webdeveloper selalu mencari cara meningkatkan kecepatan akses websitenya tanpa mengurangi kualitas tampilan. Dulu, image .png sering digunakan untuk menampilkan icon-icon dalam website. Tapi adakah cara yang lebih cepat?

Mengganti Font type bisa dilakukan dengan cukup merubah CSS. Bisakah menganti image dengan cara yang sama? Fontawesome menjadi solusi untuk itu. Fontawesome adalah sejenis font yang khusus menampilkan icon-icon dalam bentuk font. Jadi loading website akan jauh lebih cepat ketika me-load font, ketimbang me-load image. Sifat bawaan font sebagai vector type, menjadikan icon-icon dapat ditampilkan dalam ukuran besar, tetap tajam, dan tetap ringan (cukup merubah CSS bukan me-load image yang lebih besar).

Lalu, bagaimana caranya saya menggunakan Fontawesome untuk website saya? Caranya sangat mudah!

1. Kunjungi websitenya: http://fortawesome.github.io/Font-Awesome/

2. Download Font nya, atau load dari CDN-nya juga bisa

3. Masukkan kode html berikut kedalam section <head> seperti load CSS biasa

/*Untuk load fontawesome via CDN*/
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />

/*Untuk load fontawesome via folder website*/
	<link href="path/to/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> 

4. Panggil class icon yang ingin digunakan.

Contoh: ingin menampilkan icon kaca pembesar (icon search), cukup tuliskan kode HTML berikut:

<i class="fa fa-search"></i>

Cek daftar lengkap iconnya disini

Website pasti lebih cepat sekarang, karena tidak harus mendownload image lagi, icon-icon juga terlihat tajam. Ingin tahu link-link lain yang biasa saya tengok untuk rujukan ketika membuat website? Berikut adalah link-link bermanfaat.