Cara Membuat Icon Dengan Web Font

Cara Membuat Icon Dengan Web Font

Ismail
Diupdate oleh Ismail
4 - 5 menit

Halo selamat datang di Identips! Bagi kamu yang senang mengutak-atik tampilan website atau blog kamu, mungkin pernah mendengar Font Awesome atau bahkan pernah menggunakannya. Font Awesome merupakan sebuah situs yang menyediakan icon berbasis web font yang dapat kamu gunakan secara gratis pada website kamu.Tapi mungkin saja bentuk icon yang tersedia secara gratis di Font Awesome tidak seperti yang kamu inginkan sehingga membuat kamu ingin membuat web font icon versi kamu sendiri. Pada artikel kali ini saya akan membahas cara membuat icon dengan web font seperti Font Awesome.

Icon yang saya gunakan pada website ini juga menggunakan web font yang saya rancang sendiri. Dengan menngunakan icon berbasis web font, benar-benar mempermudah saya untuk membuat icon, misalnya untuk membuat logo identips seperti ini Identips. saya hanya perlu menulis kode <span class='i'>Identips</span> <i class='i logo'></i>.

Untuk membuat icon milikmu sendiri, kamu tidak harus memiliki keterampilan desain maupun coding, yang kamu butuhkan hanyalah akses internet. Berikut langkah-langkahnya.

Mencari atau membuat icon

Di internet banyak sekali situs yang menyediakan icon secara gratis, seperti Flaticon, Freeicons.io, Icon8 dan lainnya.

Pada tutorial ini saya menggunakan icon yang disediakan oleh Flaticon, kamu juga dapat menggunakan website penyedia icon gratis selain Flaticon. Jika kamu ingin menggunakan Flaticon juga, silahkan ikuti langkah berikut:

Buka Flaticon

membuat icon dengan web font 1

Langkah pertama, buka https://www.flaticon.com/, kemudian buat akun dan login.

Cari Icon

Di laman Flaticon kamu dapat mencari icon ataupun icon pack. Silahkan cari kata kunci sesuai dengan icon yang kamu butuhkan, misalnya "home".

membuat icon dengan web font 2

Setelah itu akan muncul beberapa icon home, cari icon yang menurutmu paling menarik, kemudian tambahkan ke Collections dengan cara arahkan kursor ke icon yang ingin kamu tambahkan klik ikon yang berada di sudut kanan atas. Kamu dapa menambahkan beberapa icon ke Collections

Ketika mencari icon, pastikan bahwa icon yang kamu pilih hanya memiliki 1 warna saja dan berekstensi SVG.

Download Collections

Apabila semua icon yang kamu butuhkan telah ditambahkan ke Collections, selanjutnya adalah mendownload Collections, caranya:


Klik Collections

membuat icon dengan web font 4

Klik tombol Collections yang ada pada navigation bar, maka akan muncul panel collections.


Klik Download Collections

membuat icon dengan web font 5

Klik tombol Download Collection yang ada pada panel collection.


Pilih SVG

membuat icon dengan web font 6 Setelah klik tombol Download Collection maka akan muncul pilihan format icon. Pilih format SVG.


Klik Free Download

membuat icon dengan web font 7 Setelah itu akan muncul sebuah pop-up, klik tombol Free Download.


Jika di internet kamu tidak menemukan icon yang sesuai, kamu dapat membuatnya sendiri. Kamu bisa menggunakan software desain grafis berbasis vektor ataupun tool online yang berfungsi untuk membuat gambar SVG. Karena yang kita butuhkan sebenarnya hanyalah icon yang memiliki ekstensi SVG. Pada artikel yang lain, saya sudah pernah membahas tentang SVG dan cara membuat SVG.


Jika icon yang ingin kamu gunakan sudah siap, langkah selanjutnya adalah mengubah icon menjadi web font, berikut caranya:

Mengubah icon menjadi web font

Untuk mengubah icon yang telah kita donwload tadi menjadi web font kita bisa menggunakan IconMoon, Fontello atau tool lainnya. Tetapi pada tutorial ini saya menggunakan IcoMoon, berikut langkah-langkahnya:

Ekstrak file icon

File yang kita dowload sebelumnya dari Flaticon berupa file arsip .zip, jadi kita perlu mengekstraknya terlebih dahulu. Ekstrak file tersebut kemudian masukkan kedalam satu folder.

Buka IcoMoon

membuat icon dengan web font 8 Selanjutnya buka IcoMoon, silahkan klik https://icomoon.io/app/.

Import Icons

Klik tombol Import Icons membuat icon dengan web font 9

kemudian pilih dan buka icon yang telah di ekstrak tadi. membuat icon dengan web font 10


Generate Font

membuat icon dengan web font 11 Klik semua icon yang telah di Import, kemudian klik tombol Generate Font

Atur dan Download web font


Atur web font

membuat icon dengan web font 12

Atur nama icon dengan cara mengedit teks yang ada disamping setiap icon. Nama ini yang nantinya akan digunakan untuk memanggil icon. Untuk memanggil icon formatnya seperti ini:

<i class='*ClassPrefix*-**NamaIkon**-*ClassSuffix*'>.

Untuk mengedit class prefix dan class suffix caranya klik icon roda gigi disampin tombol Download. Tetapi sebaiknya class suffix dibiarkan kosong saja. Pada tutorial ini saya menggunakan i-sebagai suffix.


Download web font

membuat icon dengan web font 12 Setelah semuanya selesai, sekarang download web font yang telah kita buat dengan cara klik tombol download.


Unggah web font

Langkah selanjutnya yang kita lakukan adalah mengupload web font agar dapat diakses secara online. Kamu dapat menguploadnya langsung ke direktori website kamu atau menggunakan CDN. Pada tutorial ini saya akan mengupload web font yang telah saya buat ke Cloudinary. Berikut cara mengupload web font ke Cloudinary.com

Ektrak web font

Langkah pertama, ekstrak web font yang telah kita download di IcoMoon

Buka Cloudinary

Selanjutnya buka https://cloudinary.com/, jika belum memiliki akun silahkan buat akun terlebih dahulu, kemudian login.

Unggah web font

Setelah masuk ke dashboard Cloudinary, klik Media Library, lalu klik tombol Upload.

membuat icon dengan web font 14

Kemudian klik tombol Browse yang ada pada menu My File, membuat icon dengan web font 15

Selanjutnya buka file web font yang telah di ekstrak pada langka nomor 1, masuk ke folder fonts dan pilih font yang memiliki ekstensi .ttf dan .woff, kemudian buka. membuat icon dengan web font 16

Tunggu hingga proses upload selesai.

Langkah pertama, salin link file font .ttf dan .woff yang telah kita upload di Cloudinary. Caranya dengan mengarahhkan kursor kearah file font yang telah kita upload kemudian klik icon Copy Link.

Simpan link kedua file font tersebut, karena linknya akan kita gunakan pada tahap selanjutnya. Link darifile font yang saya upload pada tutrial ini adalah:

    WOFF: https://res.cloudinary.com/identips/raw/upload/v1607943204/identips-icon_klgh9b.woff

    TTTF: https://res.cloudinary.com/identips/raw/upload/v1607943204/identips-icon_gfitul.ttf

Sekarang web font sudah berhasil di upload, langkah terakhir adalah memasang icon web font pada blog atau website kamu. Berikut caranya:

Memasang web font pada website

Edit CSS

Langkah pertama buka file "style.css" dari file web font yang telah kita download dari IcoMoon. Isi css tersebut kurang lebih seperti ini:

    @font-face {
        font-family: 'identips-icon';
        src:  url('fonts/identips-icon.eot?c60rlg');        src:  url('fonts/identips-icon.eot?c60rlg#iefix') format('embedded-opentype'),            url('fonts/identips-icon.ttf?c60rlg') format('truetype'),            url('fonts/identips-icon.woff?c60rlg') format('woff'),            url('fonts/identips-icon.svg?c60rlg#identips-icon') format('svg');        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
/* Dan masih banyak lagi */

Pada rule @font-face, ubah property src yang saya highlight diatas menjadi seperti ini:

    @font-face {
        font-family: 'identips-icon';
        src: url('url file font woff') format('woff'),             url('url file font ttf') format('truetype');        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    /* Dan masih banyak lagi */

Ganti 'url file font woff' dan 'url file font ttf' dengan url file font yang telah kita salin dari Cloudinary pada tahap sebelumny, maka hasilnya seperti ini:

    @font-face {
        font-family: 'identips-icon';
        src: url('https://res.cloudinary.com/identips/raw/upload/v1607943204/identips-icon_klgh9b.woff') format('woff'),             url('https://res.cloudinary.com/identips/raw/upload/v1607943204/identips-icon_gfitul.ttf') format('truetype');        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    /* Dan masih banyak lagi */

Pasang CSS pada website

Setelah property src pada rule @font-face telah kita ubah, maka selanjutnya pasang CSS tersebut pada website atau blog kamu. Caranya dengan menyalin semua kode yang yang ada pada file 'style.css' yang telah kita edit sebelumnya kedalam tag <style> </style> yang ada diantara tag <head> </head> pada website kamu. Jika kamu menggunakan Blogger simpan kode tesebut tepat diatas ]]></b:skin>.

Gunakan Icon

Jika semuanya sudah selesai itu artinya icon web font yang telah kita buat sudah siap untuk digunakan. Untuk menggunakannya cukup ketik kode <i class="classPrefix-namaIcon"> </i>, misalnya untuk menggunakan icon home yang telah saya buat pada tutorian ini saya cukup ketik <i class="i-home"> </i>. i- adalah Class Prefix dan home adalah nama icon.


Sekarang saya akan mencoba menggunakannya pada Codepen dan mari kita lihat hasilnya:


Demikian artikel cara membuat icon menggunakan web font, jika kamu menemukan kesulitan silahkan bertanya pada kolom komentar.