Salah satu unsur penting dalam membangun web ialah icon. Icon merupakan gambar yang mewakili aksi/perintah tertentu dalam sebuah aplikasi. Dengan adanya icon sebuah aplikasi akan terlihat interaktif dan friendly.
Umumnya setiap dari kita akan menggunakan icon dalam bentuk gambar. Namun tahukah Anda sebenarnya untuk menampilkan icon di web, Anda juga dapat menggunakan font saja. Salah satu font icon yang sangat populer digunakan ialah Font Awesome. Font Awesome telah menyediakan setidaknya 470 icon yang siap di tampilakan di halaman web. Dan tentu saja icon tersebut semuanya tersedia hanya dengan file font alias bukan gambar.
Keuntungan Menggunakan Font Awesome
Beberapa keuntungan menggunakan Font Awesome :
- Font Awesome ialah jenis font (bukan gambar)
- Meningkatkan performa web Anda. Dikarenakan Font Awesome merupakan jenis font, maka setiap pengunjung yang mengakses web Anda hanya akan melakukan request HTTP ke file Font Awesome saja
- Tersedia 470 lebih icon yang siap digunakan
Meng-install Font Awesome
Ada beberapa cara yang bisa Anda gunakan untuk meng-install Font Awesome di proyek web Anda, yaitu :
Menggunakan CDN
Anda dapat menggunakan Font Awesome melalui fasilitas CDN. Letakkan link Font Awesome dari CDN di bagian head HTML web Anda. Contoh :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Download Font Awesome
Anda juga bisa men-download Font Awesome kemudian meletakkannya di direktori proyek web Anda. Download Font Awesome terlebih dahulu disini. Kemudian ekstrak file yang telah di download. Setelah proses ekstrak selesai akan terdapat 4 folder utama yaitu css, fonts, less dan scss. Copy folder css dan fonts kemudian masukkan ke dalam direktori proyek web Anda. Pastikan semua file yang ada di dalam kedua folder tersebut juga telah ikut ter-copy.
Untuk menggunakan Font Awesome ini, Anda cukup menambahkan link letak CSS Font Awesome di bagian head HTML web Anda dan lokasi font yang ada diperintah CSS tersebut. Contoh :
<link rel="stylesheet" href="css/font-awesome.min.css">
Menentukan lokasi font di file CSS Font Awesome.
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Menggunakan Sass atau LESS
Jika Anda menggunakan Sass ataupun LESS, masukkan folder fonts dan scss atau less ke direktori proyek web Anda. Kemudian buka file less/variables.less atau scss/_variables.scss dan ubahlah variabel lokasi direktori font. Misalnya :
@fa-font-path : "../fonts";
Kemudian jangan lupa untuk melakukan recompile pada proyek web Anda.
Cara Menggunakan Font Awesome
Untuk menggunakan icon Font Awesome di proyek web Anda sangatlah mudah. Pertama yang harus Anda lakukan ialah mengetahui nama setiap icon terlebih dahulu. Silahkan cek di halaman fontawesome.io/icons untuk mengetahui semua nama dari icon Font Awesome.
Sebagai contoh, icon media sosial facebook memiliki nama fa-facebook. Untuk menampilkan icon tersebut berikut perintahnya :
<i class="fa fa-facebook"></i>
Mengubah Ukuran Icon
Untuk merubah ukuran icon, Font Awesome telah meyediakan beberapa class ukuran yaitu fa-lg, fa-2x, fa-3x, fa-4x, dan fa-5x. Contoh :
<i class="fa fa-facebook fa-lg"></i>
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-facebook fa-3x"></i>
<i class="fa fa-facebook fa-4x"></i>
<i class="fa fa-facebook fa-5x"></i>
Jika ukuran yang telah disediakan terasa kurang, silahkan modifikasi file CSS Font Awesome dengan menambahkan class ukuran lainnya sesuai dengan kebutuhan Anda.
Baca Juga :
– Cara Menggunakan Google Fonts
Kesimpulan
Dengan Font Awesome, menampilkan icon di proyek web Anda akan sangat memudahkan dan menyenangkan. Pada tutorial ini tidak semua fitur Font Awesome ditampilkan. Namun Anda bisa melihat berbagai contoh penggunaan Font Awesome di Font Awesome Examples seperti memberikan warna pada icon, membuat icon dengan animasi, mengubah arah icon dan lainnya.
