Cara Membuat Icon Dengan Web Font

Buka Flaticon

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”.

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

Download Collections

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

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

Selanjutnya buka IcoMoon, silahkan klik https://icomoon.io/app/.

Import Icons

Klik tombol Import Icons

kemudian pilih dan buka icon yang telah di ekstrak tadi.

Generate Font

Klik semua icon yang telah di Import, kemudian klik tombol Generate Font

Atur dan Download web font

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.

Kemudian klik tombol Browse yang ada pada menu My File,

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.

Tunggu hingga proses upload selesai.

Copy link font

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

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.