Tutorial Pemrograman

Cara Menambahkan dan Kustomisasi Material Icon ke HTML

Material Icon adalah salah satu dari sekian banyak penyedia icon gratis. Icon tersebut bisa kamu manfaatkan untuk mempercantik tampilan blog atau situs milik kamu. Ini lebih bagus dan lebih cepat dari pada kamu mendesain icon sendiri.

Kita mempunyai file html/template seperti berikut:

Pada html di atas, pada url Akun, Artikel, Tulis baru, dan Keluar akan kita tambahkan dengan icon yang sesuai. Posisi icon akan kita letakkan tepat sebelum masing-masing text.

Bagaimana caranya? Berikut langkah-langkahnya:

Cara menambahkan material icon

1. Kunjungi web https://materialdesignicons.com/, cari dan pilih icon yang sesuai.

2. Setelah mengklik icon yang akan di gunakan → klik View SVG → blok dan Copy kode tersebut untuk diletakkan ke dalam file html.

3. Kemudian Paste kode tersebut ke dalam file html/template dimana icon akan di tambahkan. Sehingga bagian script url menjadi seperti berikut:

Cara kustomisasi material icon

Agar icon SVG bisa dan lebih bebas di kustomisasi, kita harus menghapus  style="width:24px;height:24px" dan  fill="#000000" pada kode ikon. Lalu kemudian tambahkan class="ikon" ke dalam tag SVG sehingga bagian script url menjadi seperti ini:

Tambahkan style berikut di dalam <head>, tepatnya di atas tag penutup  </head>:

Sehingga hasil tampilannya pada browser akan terlihat seperti ini:

Sepertinya kelihatan kurang rapi. Untuk merapikan agar terlihat lebih bagus, kita akan melengkapi lagi dengan beberapa CSS:

Sehingga file html/template selengkapnya setelah di tambahkan ikon dan di kustomisasi akan seperti ini:

Dan begini tampilan hasilnya di browser:

Di web Material Design Icon kamu juga bisa mendapatkan icon sosial medial. Seperti Facebook, Twitter, WhatsApp, dan masih banyak lagi yang lainnya. Selamat mencoba.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Berlangganan tutorial Inwepo melalui email

Copyright © 2019 Inwepo - All Rights Reserved.

To Top