Font Awesome adalah framework CSS yang berfungsi untuk membuat ikon atau simbol. Keberadaannya saat ini sangat membantu banyak web developer, karena tidak perlu pusing untuk membuat ikon sendiri. Cukup dengan memanggil Font Awesome ke dalam website, berbagai jenis ikon keren bisa langsung dipakai tanpa perlu ribet membuatnya secara manual seperti dulu. Meski namanya mengandung kata ‘font’ tidak berarti Font Awesome menghasilkan text seperti Google Font.
Keunggulan Font Awesome ini banyak sekali, diantaranya :
- Gratis, Font Awesome bebas digunakan oleh siapapun untuk kebutuhan apapun.
- Mempunyai ratusan ikon keren yang cocok digunakan untuk blog pribadi sampai website profesional.
- Dapat bekerja dengan semua jenis framework CSS lainnya seperti Bootstrap.
- Compatible di banyak jenis browser.
- Dokumentasi sangat lengkap.
- Proses instalasi mudah dan tidak membutuhkan Javascript tambahan lainnya.
- Penggunaannya pun mudah, cukup menambahkan nama ikon pada class HTML atau unicode pada CSS pseudo-elements.
- Ringan dan tidak memberatkan loading blog.
Menambahkan Font-awesome
- Buat folder project web di dalam folder htdocs, misal dengan nama belajarfontawesome, dalam folder belajarfontawesome tersebut kita buat lagi folder assets.
- Kita download Font Awesome-nya terlebih dahulu pada alamat https://fontawesome.com/download untuk men-download, pilih Free for Web jika mau yang gratis atau Pro for Web untuk yang berbayar, untuk yang Pro for Web tentunya mempunyai banyak kelebihan. Pada tutorial ini dipilih yang Free for Web dengan versi fontawesome-free-5.15.4-web.
- Setelah selesai download, ekstrak isinya ke dalam direktori proyek web yang sudah kita buat, simpan di dalam direktori/folder assets. Agar memudahkan, kita ubah/rename nama direktori/folder-nya dengan menjadi fontawesome.
- erhatikan Buat satu file dalam folder project web yang sudah kita buat (belajarfontawesome) tersebut, misal dengan nama index.php, dengan sintak seperti berikut :
<!DOCTYPE html> <html> <head> <title>Belajar Font Awesome</title> <link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css"/> </head> <body> </body> </html>Perhatikan pada baris 5, terdapat sintak :
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css"/>
Yang merupakan sintak untuk memanggil css pada font awesome, selanjutnya kita tinggal panggil nama-nama class-nya untuk membuat icon.
- Icon dapat kita buat dengan tag <i> yang disertai kelas fa, fab, fad, fal, far dan fas. Biasanya pada Bootstrap, kita menggunakan tag <span> untuk membuat icon. Namun, pada Font Awesome disarankan menggunakan tag <i>, karena lebih pendek. Contoh :
<!DOCTYPE html> <html> <head> <title>Belajar Font Awesome</title> <link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css"/> </head> <body> <i class="fab fa-youtube"></i> </body> </html>Hasilnya :
Penjelasan:
-
- fab adalah nama class Font Awesome, wajib ada di setiap pembuatan icon.
- fa-youtube adalah nama icon yang akan dipakai untuk menampilkan icon youtube. Daftar nama-nama icon-nya bisa dilihat di dokumentasi font-awesome.
Sampai di sini cara menggunakan icon Font Awesome sudah bisa digunakan, selanjutnya ada bahasan untuk mengubah ukuran icon, warna dan sebagainya.
Mengubah Ukuran Icon
Ukuran icon akan mengikuti ukuran font pada CSS, tapi dapat kita perbesar dan perkecil sesuai kebutuhan. Font Awesome menyediakan class untuk menentukan ukuran icon, diantaranya : fa-lg (33% lebih besar), fa-2x, fa-3x, fa-4x, dan fa-5x, yang bisa dituliskan beriringan dengan class fab.
Contoh penggunaan :
<i class="fab fa-youtube fa-3x"></i>
Maka akan hasilnya akan memperbesar ukuran icon sebesar 3x ukuran standar.
Mengubah Warna Icon
Pada dasarnya Font Awesome akan mengikuti warna teks dari sebuah elemen. Berarti, untuk mengubah warna icon font-awesome, kita harus merubah warna untuk teksnya.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Awesome</title>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css" />
</head>
<body>
<p style="color: orange">
<i class="fa fa-address-book"></i>
</p>
</body>
</html>
Haasilnya icon adress book akan berwarna orange.
Tips: Gunakan class fa-inverse untuk mengubah warna ikon menjadi putih (kebalikan dari hitam)
Menggabungkan Beberapa Ikon
Kadang kita membutuhkan beberapa ikon untuk digabungkan, misalnya kita ingin menggabungkan ikon square () dengan ikon terminal () agar membentuk sebuah ikon terminal yang dibungkus dengan kotak.
Untuk melakukan ini, kita membutuhkan sebuah elemen untuk membungkus ikon yang akan digabungkan. Elemen tersebut harus menggunakan class fa-stack.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Awesome</title>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css" />
</head>
<body>
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
</body>
</html>
Pada contoh di atas kita menggabungkan ikon fa-square dan fa-terminal, perlu dicatat yang ditulis duluan akan menjadi yang paling bawah dalam tumpukan (stack) ikon. Class fa-stack-1x adalah ukuran ikonnya, sama seperti fa-lg, fa-2x, dsb.
Coba juga untuk bereksperimen membuat tumpukan ikon yang lain seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Awesome</title>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css" />
</head>
<body>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack">
<i class="fa fa-user fa-stack-1x"></i>
<i class="fa fa-circle-o fa-stack-2x"></i>
</span>
<span class="fa-stack">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
</body>
</html>
Membuat Ikon untuk List
Untuk menggunakan ikon font awesome untuk List, kita bisa menggunakan class fa-ul dan fa-li.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Awesome</title>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css" />
</head>
<body>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-circle"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
</body>
</html>
Hasilnya :
Memutar Ikon
Untuk memutar ikon, kita bisa menggunakan class fa-rotate-* dan fa-flip-*.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Awesome</title>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css" />
</head>
<body>
<i class="fa fa-check"></i> normal<br>
<i class="fa fa-check fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-check fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-check fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-check fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-check fa-flip-vertical"></i> fa-flip-vertical
</body>
</html>
Hasilnya :
Membuat Custom CSS Sendiri
Kadang kita ingin membuat style CSS sendiri untuk Font Awesome, misalkan kita ingin mengubah warna saat ikon disentuh pointer (hover).
Kita buat dulu file css dengan nama style.css di dalam folder project web kita dengan sintak :
.fa-star:hover {
color: gold;
cursor: pointer;
}
Selanjutnya di file index.php kita tuliskan sintak seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Awesome</title>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<i class="fa fa-star fa-lg"></i>
<i class="fa fa-star fa-lg"></i>
<i class="fa fa-star fa-lg"></i>
<i class="fa fa-star fa-lg"></i>
<i class="fa fa-star fa-lg"></i>
</body>
</html>
Hasilnya :
Membuat Ikon dengan Animasi
Di dalam web biasanya terdapat ikon yang bisa bergerak, seperti ikon yang tampil saat loading. Font Awesome menyediakan dua class untuk menggerakkan ikon, yaitu fa-spin dan fa-pulse.
Class ini biasanya digunakan pada ikon fa-refresh, fa-cog, fa-circle-notch dan fa-spinner. Bisa saja kita gunakan pada jenis ikon yang lain, tapi hasilnya akan kurang bagus.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font Awesome</title>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css" />
</head>
<body>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading…</span>
<i class="fa fa-circle-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading…</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading…</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading…</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading…</span>
</body>
</html>
Hasilnya :
Demikian tutorial cara penggunaan Font Awesome, jika ada pertanyyan silahkan tuliskan di kolom komentar.
Semoga bermanfaat.
Be the first to comment