Pada kesempatan kali ini kita akan membahas cara menggunakan font awesome
Seperti kita tahu bahwa untuk menampilkan icon font awesome, kita perlu me load beberapa file yaitu 1 file css dan 6 file fonts. total ukuran file tersebut bisa ratusan KB! cukup memakan waktu bukan?
Nah, saat ini, font awesome telah menyediakan cara baru untuk meload semua file tersebut tanpa harus membebani server sehingga waktu load website menjadi lebih cepat.
Nah pada kesempatan kali ini kita akan membahas cara tersebut, disamping juga cara manual yang umumnya telah biasa kita gunakan.
I. Load Aset Terkait Font Awesome
Seperti telah dijelaskan sebelumnya, terdapat dua cara untuk meload file-file yang diperlukan yaitu cara otomatis dan cara manual.
1. Load Aset Font Awesome Dengan Cara Otomatis
Cara paling mudah untuk menggunakan font awesome adalah menggunakan file javascript yang telah disediakan oleh Font Awesome.
Untuk mendapatkan file ini, kunjungi halaman: Get started with Font Awesome isikan email dan klik tombol “Send my Font Awesome embed code”
Pada contoh kali ini, saya mendapatkan email seperti ini:
Selanjutnya copy link javascript dan paste didalam elemen <head> dari website kita, contoh:
<html>
<head>
<link rel="stylesheet" href="css/main.css"/>
<script src="https://use.fontawesome.com/64c9e35xxx.js"></script>
</head>
<body>
<i class="fa fa-cog"></i>
</body>
</html>Ketika dijalankan, maka javascript tersebut akan meload file css yang diperlukan kemudian membuat element <link> baru untuk menempatkan file css tersebut.
Pada contoh diatas, halaman akan berubah menjadi:
<html class="fa-events-icons-ready">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="https://use.fontawesome.com/64c9e35xxx.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/64c9e35xxx.css" media="all">
</head>
<body>
<i class="fa fa-cog"></i>
</body>
</html>Dengan cara otomatis ini kita dapat melakukan pengaturan bagaimana file css di load dan versi font awesome yang ingin digunakan.
Caranya, register akun dengan mengklik tombol “Register Your Font Awesome CDN Account” pada email yang kita dapatkan tadi, kemudian lakukan pengaturan sesuai kebutuhan.
Contoh pengaturan pada akun Font Awesome
Selesai.
Sampai tahap ini kita sudah bisa menggunakan Font Awesome, silakan menuju bagian II. Cara Menggunakan Font Awesome
2. Load Aset Font Awesome Dengan Cara Manual (Offline)
Cara ini merupakan cara yang umum digunakan, yaitu kita menempatkan file css dan file font secara manual. Untuk melakukannya terlebih dahulu kita perlu mendownload file Font Awesome.
Untuk mendownloadnya sobat dapat langsung mengunjungi official websitenya.
Langkah yang diperlukan adalah:
- Pertama, ekstrak file zip yang telah kita download, kemudian cari folder bernama css fan fonts, selanjutnya tempatkan kedua folder tersebut pada folder kerja kita.
Note: folder css dan fonts harus berada pada level yang sama.
Contoh: dalam folder htdocs kita buat file
index.htmldan sebuah foldercss
Kemudian dalam folder
csstersebut, kita buat folderfont-awesome.Selanjutnya, pada folder font-awesome tersebut kita tempatkan foldercssdan folderfontbawaan dari Font Awesome. Selain itu saya juga menambahkan file main.css - Load file css font awesome pada bagian
<head>. Misal pada file index.html kita load filefont-awesome.min.css:<html> <head> <link rel="stylesheet" href="css/main.css"/> <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"/> </head> <body> </body> </html>
Selesai.
Sampai tahap ini kita sudah bisa menggunakan Font Awesome, sobat dapat langsung ke bagian II. Cara Menggunakan Font Awesome
Mengubah lokasi font
Pada kondisi tertentu mungkin kita ingin memisah lokasi file font dan file css, untuk keperluan tersebut, kita perlu melakukan beberapa perbaikan.
Misal: kita buat folder fonts pada htdocs, kemudian kita tambahkan folder font-awesome pada pada folder fonts tersebut. Selain iu, kita pindah file css font-awesome ke direktori css.
Karena lokasi file font telah berubah, maka lokasi tersebut perlu kita sesuaikan. Buka file font-awesome.min.css yang ada di folder css, kemudian ubah lokasi font.
Lokasi font ini ada di bagian src pada @font-face. Secara default, lokasi font adalah “../fonts/” ubah sesuai dengan lokasi baru yaitu “../fonts/font-awesome/“
II. Cara Menggunakan Font Awesome
Setelah kita memahami bagaimana cara meload file yang diperlukan, selanjutnya kita akan mempelajari bagaimana cara menggunakan font awesome
Untuk menampilkan icon font awesome, kita harus menambahkan class fa fa-namaicon pada elemen. fa disini untuk menset font family menjadi font-awesome dan fa-namaicon untuk menentukan jenis icon yang ingin ditampilkan.
Jenis elemen
Kita dapat menambahkan icon pada elemen apapun, namun pada umumnya digunakan adalah elemen <i>. Contoh untuk menampilkan icon setting kita tuliskan: <i class="fa fa-cog"></i>. Hasilnya sebagai berikut:
Untuk nama icon sobat dapat melihat referensinya di web resminya di halaman: Font Awesome Icons. Adapun contoh tampilan halaman tersebut adalah:
III. Style Yang Dapat Diterapkan Pada Font Awesome
Agar sesuai dengan yang kita inginkan, Icon hasil output dari font awesome dapat kita beri style. Adapun style yang dapat diterapkan sama dengan ketika kita memberikan style pada huruf, karena sejatinya icon font hanyalah font (huruf)
Merubah warna
Untuk merubah warna, kita tinggal mendefinisikan properti color pada icon. Agar aman sebaiknya kita membuat class tersendiri pada icon.
Jika style yang ditambahkan sederhana, sobat dapat langsung menuliskannya pada elemen menggunakan inline-style
Contoh kita buat elemen HTML seperti ini
<i class="fa fa-cog setting-icon"></i>Selanjutnya kita buat class setting-icon:
.setting-icon {
color: #45bd55;
}atau dengan inline-css:
<i class="fa fa-cog setting-icon" style="color: #45bd55"></i>Hasilnya:
Merubah Ukuran Font
Seperti font pada umumnya untuk merubah ukuran font, kita perlu mendefinisikan property font-size. Font Awesome sendiri telah menyediakan class untuk merubah ukuran font yaitu fa-lg, fa-2x, fa-3x, fa-4x, atau fa-5x
Class tersebut diatas sejatinya hanya mengubah nilai font-size, saya sendiri lebih memilih mendefinisikan font-size secara manual sehingga pas dengan kebutuhan.
Melanjutkan contoh sebelumnya, misal kita ubah ukuran icon cog
.setting-icon {
color: #45bd55;
font-size: 52px;
}atau bisa juga menggunakan class bawaan dari font awesome:
<i class="fa fa-cog fa-3x"></i>Hasil:
Memberi shadow
Layaknya huruf lain, kita juga bisa memberi bayangan atau shadow pada icon, yaitu dengan mendefinisikan property text-shadow
Melanjutkan contoh sebelumnya, mari kita buat icon cog memiliki bayangan. Kita ubah class setting-icon menjadi:
.setting-icon {
color: #45bd55;
font-size: 12px;
text-shadow: 3px 3px 1px #CCCCCC;
}Hasil:
Style lain
Selain style yang berkaitan dengan tampilan icon, kita juga dapat menerapkan style lain pada icon, diantaranya terkait posisi icon: text-align, vertical-align, dan line-height
Contoh:
text-align: center;
vertical-align: middle;
line-height: 25px;Efek: Icon Berputar
Efek ini bukan diterapkan pada icon nya tetapi pada elemen nya (elemen <i>). Style yang diterapkan sama seperti animasi pada CSS 3 yaitu menggunakan @keyframes
Font Awesome sudah menyediakan class untuk membuat efek tersebut yaitu fa-spin. Sebagai contoh mari kita buat icon cog berputar, kode HTML yang kita gunakan: <i class="fa fa-cog fa-spin"></i>
Hasil:
Secara default, durasi putaran adalah 2s, kita dapat mengubahnya dengan mendefinisikan sendiri properti animation, contoh:
.setting-icon {
color: #45bd55;
font-size: 12px;
text-shadow: 1px 1px 1px #CCCCCC;
animation: fa-spin 1s infinite linear;
}Hasil:
animation yang digunakan pada efek ini baru tersedia pada CSS 3 yang sudah didukung oleh mayoritas browser modern, namun khusus untuk IE, baru mendukungnya pada versi 10 keatasEfek Lain
Terdapat berbagai efek menarik lainnya seperti icon yang terbalik (Flipped icon), icon yang memutar (Rotated Icon) dan icon yang bertumpuk (Stacked Icon)
Efek efek tersebut dapat dipelajari pada halaman contoh cara menggunakan font awesome pada web resminya: Font Awesome Examples
Demikian pembahasan mengenai cara menggunakan font awesome, semoga bermanfaat.
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com