Penulis: Moch Adnan dipublikasikan: 22 Juli 2023
Assalamu'alaikum Wr. Wb
Hi, sobat berjumpa lagi dengan Moch adnan blog dan kali ini saya akan memposting tentang cara menggunakan google material icon yang bisa diaplikasikan untuk tampilan halaman blog atau website. 

Seperti Inilah Cara Menggunakan Google Material Icon

Material icon adalah ikon terbaru Google yang menggabungkan lebih dari 3.010 glyph dalam satu file font dengan berbagai varian desain. Simbol tersedia dalam tiga gaya dan empat gaya font variabel yang dapat disesuaikan - dikutip dari Google fonts

Keren ya sob? Dengan bantuan icon tersebut sobat bisa kian mempercantik tampilan blognya. 

Biar saya tunjukan beberapa hasil yang didapatkan dan diterapkan sesuai dengan kebutuhannya, misalkan saya membuat sebuah daftar halaman seperti ini:

Home Contact Sitemaps

Halaman di atas belum saya isi dengan menyisipkan icon, jadi terlihat seperti biasa saja. Sekarang saya akan isi dengan menyisipkan icon dari Google material icon untuk menu tersebut. 

homeHome   personAbout   mail Contact 

Atau seperti berikut:

home
Home  

person 
about 

mail
contact


Cara menggunakan Google material icon


Langkah pertama:
Di blogger pilih Tema, pilih edit HTML, lalu silakan simpan kode JS dibawah ini tepat di atas kode </head>. 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
Klik Simpan perubahan Tema jika sudah. 

Langkah kedua:
Untuk menggunakan icon pada halaman blog, sobat harus menuliskan HTML seperti ini:
<i class='material-icons'>nama icon disini </i>
Dan mengambil nama icon terpilih di situs Google material icon. 

Ketikkan kata Google material icon di beranda pencarian browser sobat, di hasil halaman teratas pilih Google fonts. Atau langsung ikuti link ini https://fonts.google.com/icons
Seperti Inilah Cara Menggunakan Google Material Icon

Copy nama icon yang dipilih dan pastekan dibagian titik-titik pada kode HTML
<i class="material-icons">... . </i>
Hingga urutan kodenya menjadi seperti berikut
<i class="material-icons"> home </i>Home  
<i class="material-icons"> person </i>About
<i class="material-icons"> mail </i>Contact
Sampai disini Dasar-dasar menggunakan Google material icon sudah bisa sobat kuasai, selanjutnya silahkan untuk menjelajahi dan memanfaatkakan Gaya,variabel icon. 

Tetap menulis,tetap berbagi. Sukses selalu buat sobat semua. trending_up