Membuat Font Icon Sendiri Dengan Mudah
Menggunakan icon atau gambar pada tampilan website mungkin akan menjadikan tampilan website yang kita miliki lebih menarik dan komunikatif.
Disamping beberapa alasan diatas juga icon bisa menjadi sebuah identitas dari website itu sendiri. Beberapa font icon yang sering kita dengar seperti Fontawesome, Bootstrap Icon, Icofont dan lain sebagainya yang dapat dengan mudah dan gratis kita gunakan dengan berbagai macam jenis icon yang di sediakan. Tapi apakah semua icon itu digunakan? Sepertinya tidak. Kita bisa saja mengambil icon yang kita butuhkan tapi ukuran dari file font icon pack itu akan tetap besar dan akan mempengaruhi load page dari website kita. Cara terbaik adalah membuat font icon sendiri yang mana saja yang akan kita gunakan.
Kali ini saya akan share tentang bagaimana cara membuat font icon sendiri dengan dengan mudah seacara online.
- Pertama siapkan dulu icon mana saja yang akan kita jadikan font icon. Disarankan menggunakan format file .svg dengan ukuran yang kecil dan hanya terdiri dari satu warna solid.
- Setelah semua icon sudah di siapkan, kamu bisa akses https://icomoon.io/app/. Lakukan registrasi dan ikuti step nya. Tampialnnya seperti berikut
3. Kemudian import icon yang akan di jadikan font icon dengan menekan tombol Import Icons
4. Icon yang berhasil di import akan muncul di bagian atas seperti berikut
Kamu juga bisa merubah skala, warna, memindahkan, dań menghapus icon pada tombol bagian atas. sesuaikan dengan kebutuhan font icon yang akan kamu buat. baik dari segi ukuran, warna, ataupun variasi lainnya.
5. Pilih font yang akan di generate menjadi font icon dengan memilih tombol Select kemudian pilih tombol Generate Font pada bagian bawah.
6. Pada bagian ini kamu bisa cek kembali font icon yang akan di gunakan. Nama font icon, ukuran, warna, dan nama class.
6. Setelah semuanya dirasa tidak ada perubahan lagi dan sudah sesuai kemudian klik Download
7. Buka folder font icon yang berhasil di download yang terdapat beberapa folder dan file sebagai berikut
Kita cukup ambil isi folder fonts dan style.css untuk kita gunakan. Jika ingin melihat preview bisa buka file demo.html
didalam folder fonts terdapat 4 file seperti iconmoon.eot, iconmoon.svg, iconmoon.ttf, dan iconmoon.woff. dan untuk style.css kamu kan melihat code berikut
Salin folder fonts dan file style.scss pada project yang akan kita gunakan. kamu juga bisa mencustom nama class sesuai keinginan seperti icon- menjadi as-icon- atau sesuai kebutuhan.
setelah semuanya selesai kita coba terapkan pada tag html seperti berikut. Buka pada browser dan font icon pun sudah terlihat.
Mungkin sedikit share tentang bagaimana cara membuat font icon sendiri dengan mudah menggunakan bantuan iconmoon. Jika ada yang belum di mengerti silahkan tinggalkan komentar.
Terimakasih