Skip to main content

Cari Icon Favorit dari Ribuan Koleksi, SVG, PNG, DLL, Gratis!


Dalam memodifikasi Template Blogger atau kebutuhan lain akan icon dengan format keinginan kita seperti svg, png, maupun unicode, bisa kita dapatkan dengan mencarinya di situs www.iconmonstr.com dengan 4512+ icon gratis saat ini dari 316 koleksi mereka, misal ingin icon whatsapp maka ketik saja pada kotak pencariannya, jika ada akan langsung muncul berbagai pilihan model dan bentuk tebal/tipis terang/gelap lalu pilih salah satu kemudian memilih format yang diinginkan dan selanjutnya conteng izin lalu download atau salin kode embednya untuk di pasang di blog/situs kita.

Hanya saja jaman sekarang dimana kecepatan blog/situs menjadi prioritas utama, mungkin format png sudah jarang dipakai begitu juga font-awesome karena pemasangannya memakai javascript/stylesheet yang sedikit banyaknya akan menambah beban loading blog karena menggunakan tautan external dari luar situs/blog kita namun meski begitu font-awesome memang masih paling sering digunakan. Font-awesome versi terbaru baca di Cara Menampilkan Berbagai Jenis Icon dengan Font Awesome

Namun satu2nya pilihan jika ingin pakai icon ringan adalah memilih format svg yang juga tersedia di situs iconmonster tersebut, selain itu svg ini juga merupakan rekomendasi dari situs w3school untuk digunakan karena selain ringan juga kualitasnya tetap bagus di tampilan layar apapun dan dapat diubah2 warna dan ukurannya melalui css sesuai selera kita.

Contoh, ini svg icon hamburger/menu.

<svg class='hamburger-menu' width='24' height='24' viewBox='0 0 24 24'><path d='M4 22h-4v-4h4v4zm0-12h-4v4h4v-4zm0-8h-4v4h4v-4zm3 0v4h17v-4h-17zm0 12h17v-4h-17v4zm0 8h17v-4h-17v4z'/></svg>

Nah tuh class='hamburger-menu'. Tinggal bikin aja css nya seperti berikut, misal.

.hamburger-menu{
fill:merah;
margin:0;
padding:0
}

"Fill" warna untuk iconnya, bisa diganti jadi biru dll.

Untuk icon svg sosial media, seperti facebook, whatsapp, twitter, dll ada di postingan ini Cara Membuat Tombol Share Sosial Media

Comments

  1. Kapan-kapan coba pakai ah, barangkali nanti di perlukan untuk editing foto, he-he ☺

    ReplyDelete
  2. Wah terimakasih infonya kak, sangat membantu

    ReplyDelete
  3. Mas Jaeyyyyy .., itu apik widgetnya ..., tapi ku nyerah cara masangnya, wwkkk..

    ReplyDelete
  4. Terimakasih atas turorialnya
    Saya jadi pengen mencobanya

    ReplyDelete
  5. Mantul, SVG itu ringan namun tetap kalah indah sama font awesome yang rupawan. Selamat hari raya idulfitri...

    ReplyDelete
  6. Haloo kang, menarik nih. Icon icon seperti ini sangat dibutuhkan, kan.. :D

    ReplyDelete

Post a Comment

Jika ada hal yang kurang jelas, misalnya tips dan trik yang tidak berfungsi, ulasan yang sudah usang, meski mengetahui ada ulasan yang memerlukan pembaruan terkadang kami malas untuk memperbaruinya, jadi silakan tanyakan saja melalui kolom komentar dan akan kita bahas bersama. Regards!