Memasang Design Material Icon di Blogger

Table of Contents

Selain dengan tulisan kita membutuhkan gambar atau icon secara langsung atau lebih mudah memahami arti dari tulisan pada menu blog.

Ada beberapa platform yang menyediakan font icon ini untuk website contohnya seperti Font Awesome yang sudah lebih dahulu populer.

Material icon ini dibuat oleh team Google sebagai bentuk icon khusus untuk material design yang sudah diterapkan ke hampir semua aplikasi milik google.

Tentu saja icon ini terlihat lebih modern dibandingan dengan icon yang sudah lama. Kekurangan material icon saat ini adalah list icon yang masih kalah banyak dibandingkan dengan Font Awesome.

1. Langkah pertama letakan Google Web Fonts dibawah ini tepat diatas kode </head>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

Selain menggunakan Web Fonts, Anda juga bisa menggunakan @font-face letakan di atas kode ]]></b:skin> atau </style>

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

2. Selanjutnya buka https://design.google.com/icons/

3. Pilih icon yang akan digunakan pada blog.

Rekomendasi untuk penggunaan HTML Material icon, Gunakan HTML seperti dibawah ini:

<i class="material-icons">&#xE853;</i>

Contoh penggunaan HTML Material Icon.

<i class='material-icons'>account_circle</i>

<a href="#"><i class='material-icons'>account_circle</i> Profile</a>

Untuk memperbesar ukuran icon, Anda hanya perlu menambahkan CSS berikut ini, (Tidak wajib mengikuti tutorial CSS dibawah ini), karena icon akan secara otomatis menyesuaikan ukuran font pada link yang sudah lebih dulu menggunakan font_size.

  .material-icons.md-18{font-size:18px}
  .material-icons.md-24{font-size:24px}
  .material-icons.md-36{font-size:36px}
  .material-icons.md-48{font-size:48px}

Dan juga ubah kode HTML icon menjadi seperti di bawah ini:

account_circle <i class="material-icons md-18">account_circle</i>

account_circle <i class="material-icons md-24">account_circle</i>

account_circle <i class="material-icons md-36">account_circle</i>

account_circle <i class="material-icons md-48">account_circle</i>

md-18, 18 adalah ukuran font.

Untuk memasang material icon melalui CSS :before dan :after, contoh kodenya seperti dibawah ini:

.cobatest:after{content:"account_circle";font-family:Material Icons;font-style:normal;font-weight:400;text-decoration:inherit}
    
.cobatest:before{content:"account_circle";font-family:Material Icons;font-style:normal;font-weight:400;text-decoration:inherit}

Itulah cara Memasang Design Material icon di Blogger.