Cara Membuat Font Icon Logo Sendiri

Hallo semuanya, kalian para web designer pasti mengetahui tentang font icon. Jika kalian menggunakan bootstrap, pastinya kalian mengetahui tentang komponen icon bootstrap yang bernama glyphicon. Glyphicon sendiri adalah kumpulan gambar atau icon yang biasa sering dipakai dalam sebuah website. Tujuan dibuatnya icon berbasis font seperti itu adalah untuk menghemat resources disbanding harus menggunakan gambar berbasis jpg atau png.

Font icon saat ini memang sangat popular untuk digunakan dalam sebuah website karena berbasis vector, sehingga ketika ukuran dibesarkan akan tetap terlihat baik dan tidak pecah seperti gambar berbasis jpg, png atau yang lainnya.

Untuk saat ini font icon paling popular dan paling banyak digunakan serta paling lengkap adalah font-awesome yang memang untuk berbagai kelengkapan database icon yang di miliki oleh font awesome bisa terbilang paling lengkap jika dibandingkan dengan font icon yang lainnya.

Hampir semua website modern saat ini menggunakan icon berbasis font untuk meringankan dan menghemat sumber daya yang mereka gunakan pada sebuah website. Tahukah kalian bahwa sekarang ini kita sudah bisa membuat icon berbasis font sendiri. Disini kita bisa membuat sebuah icon atau logo perusahaan sendiri untuk dijadikan sebagai font icon. Caranya sangat mudah, kalian bisa ikuti tutorial dibawah ini.

Pastikan kalian memiliki gambar berupa file *.svg yang bisa kalian dapatkan dengan mengikuti artikel dumetschool yang berjudul membuat gambar svg dengan illustrator

Jika kalian sudah memiliki logo atau gambar svg, kalian bisa langsung mengunjungi website yang menyediakan layanan convert svg menjadi font seperti fontello.com.

Pada website fontello.com kita bisa mengupload gambar svg yang kita miliki untuk dirubah menjadi font icon yang siap digunakan.

Untuk menggunakannya kita bisa mendownload font yang kita upload pada tombol download sebelah kanan atas.

Selanjutnya kita bisa melihat kode class yang ada pada tab customize names.

Contohnya seperti ini

<span class=”icon-dumet”></span>

Baiklah teman-teman, semakin banyak sekali kemudahan dalam menambahkan fitur custom pada website saat ini. Dengan banyaknya tools online seperti fontello, kita bisa menghemat size total website kita. Demikian artikel tentang cara membuat font icon logo sendiri. Semoga bermanfaat

17 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat