Membuat Font Icon Sendiri Dengan Mudah

Published 06 Juli 2022

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.
homepage iconmoon
  • Kemudian import icon yang akan di jadikan font icon dengan menekan tombol Import Icons
import icon
  • Icon yang berhasil di import akan muncul di bagian atas seperti berikut
import success

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.

import other
  1. Pilih font yang akan di generate menjadi font icon dengan memilih tombol Select kemudian pilih tombol Generate Font pada bagian bawah.
generate icon
  1. Pada bagian ini kamu bisa cek kembali font icon yang akan di gunakan. Nama font icon, ukuran, warna, dan nama class.
edit icon

Setelah semuanya dirasa tidak ada perubahan lagi dan sudah sesuai kemudian klik Download

download icon
  • Buka folder font icon yang berhasil di download yang terdapat beberapa folder dan file sebagai berikut
folder icon

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

icon list

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.

<span class="icon-copy"></span>
<i class="icon-copy"></i>
<em class="icon-copy"></em>

Mungkin sedikit share tentang bagaimana cara membuat font icon sendiri dengan mudah menggunakan bantuan iconmoon.

Terimakasih!