Pada Artikel ini saya akan berbagi tentang salah satu komponen yang dapat anda terapkan untuk melakukan styling dalam membangun tampilan suatu website yaitu penggunaan / penerapan Font Icon.
Apa itu Font Icon?
Font Icon adalah suatu component atau bisa dikatan library yang dapat digunakan untuk mendukung styling tampilan / design suatu website.
Sebelumnya pada awal website ditemukan nya website (pada masa website gernersi 1.0) untuk pembuatan / penggunaan icon-icon dan pada menu dari suatu website dibuat dengan menggunakan gambar, namun siring berkembangnya teknologi untuk penggunakan icon kini telah diterpakan dengan menggunkan font, dengan menggunakan font maka akan meningkatkan kecepatan load suatu halaman webiste.
Mengapa penggunaan font icon lebih effective daripada gambar ?
Berikut ini beberapa perbandingan antara penggunaan Font Icon dengan pada gambar :
Font Icon
+ Karena didefinisikan dalam bentuk CSS library. Untuk memanggil masing-masing font dapat dilakukan dengan menuliskan menuliskan identitas font pada class di suatu element HTML.
+ Flexible, Ukuran icon dapat diatur sesuai sesuai keinginan dengan menggunakan CSS, font-size.
+ Responsive, gambar tidak akan pecah ketika di-resize zoom out, karena biasanya font icon disimpan dalam bentuk SVG (Scalable Vector Graphics).
+ Hemat memory, apabila anda menggunakan UTF-8, maka 1 character = 8bit.
Image
– Untuk membuat website yang responsive, Web Designer perlu menyiapkan gambar icon dengan berbagai macam ukuran. Untuk mendefinisikan gambar cukup memakan waktu (tidak effective).
– Gambar dapat berukuran lebih dari 1KB bahan lebih dari 1MB, tergantung dengan kualitas, dan ukurannya.
Sebenarnya tidak hanya lebih cepat, pengunaan font icon akan lebih flexible, dan menghemat memory pada hosting. Oleh sebab itu banyak website yang lebih memanfaatkan font icon daripada gambar.
Vendor Font Icon
Berikut ini beberapa vendor yang menyediakan Font Icon yang biasanya kami gunakan untuk membangun tampilan dari suatu website :
- Font Awesome
- Ionicons
- The Noun Project
- Material Design Icons
- FlatIcon
- dan lain lain (alternative Font Icon, Font Icon website).
Dari berbagai macam font icon yang tersedia di internet, masing-masing memiliki kelebihan, keunggulan, dan keunikan tersendiri. Namun yang paling sering kami gunakan adalah Font Awesome, oleh sebab itu yang akan saya bahas lebih lanjut adalah Font Awesome.
Font Awesome
Font Awesome adalah salah satu vendor penyedia toolkit font icon yang dapat digunakan secara free atau pun premium. Tentu saja untuk yang premium user dapat menggunakan lebih banyak font yang tersedia.
Font Awesome memiliki beberapa version, seiring berjalannya waktu dan banyaknya request kebutuhan icon dalam membuat website maka semakin banyak variasi icon yang tersedia. Dari masing-masing version yang berbeda adalah jumlah variasi icon begitu pula dengan cara memanggil/mendefinisikan icon pada element HTML pun juga terdapat sedikit perubahan.
Cara Menggunakan Font Awesome
Pada umumnya semua font icon yang digunakan untuk men-design tampilan dari suatu website, memiliki cara penggunaan yang sama, yang berbeda hanyalah class yang digunakan untuk memanggil masing-masing font icon. Berikut ini langkah-langkah untuk meng-include font icon pada suatu source HTML terdapat 2 cara yaitu :
1. Install Font Awesome
- Untuk Install File Font, anda dapat men-download terlebih dahulu di official page.
- Ekstrak file, lalu pindahkan file yang telah anda ekstrak pada folder assets/font di project anda.
- Terakhir memanggil/mendefinisikan file .css dari font awesome pada file project HTML yang anda buat.
- Jika anda ingin melihat contoh code / nama masing-masing icon yang disediakan oleh font awesome anda dapat melihatnya di cheatsheet.
2. Menggunakan CDN Font Awesome
Font Awesome v.3.2.1
Berikut cdn link yang disisipkan pada source code HTML :
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css”>
Berikut ini cara memanggil font pada font awesome v.3.2.1:
<span class=”fa icon-envelope”></span>
Font Awesome v.4.7.0
Berikut cdn link yang disisipkan pada source code HTML :
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
Berikut ini cara memanggil font pada font awesome v.4.7.0 :
<span class=”fa fa-envelope”></span>
Font Awesome v.5.15.2
Berikut cdn link yang disisipkan pada source code HTML :
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css”>
Berikut ini cara memanggil font pada font awesome v.5.15.2 :
<span class=”fas fa-envelope”></span>
Berikut ini cara memanggil social media icon pada font awesome v.5.15.2:
<span class=”fab fa-facebook”></span>
Note :
- Jika anda menggunakan font CDN maka anda perlu connect dengan internet supaya web browser dapat me-load font awesome yang disediakan secara online.
- Namun jika anda menginstall font awesome pada local project anda, dapat mengakses nya secara offline
Sekian Artikel tentang Font Icon apabila banyak kurangnya mohon maaf… dan Terima Kasih.
~Semoga Bermanfaat~