Cara Memasang Material Design Icons di Blogger

11 June 2016

Material Icons for Blogger - Kembali lagi blog dunia blanter membagikan tutorial tentang material design, kali ini saya akan memberikan tutorial cara memasang material icons di blogger.

Selain dengan tulisan kita membutuhkan gambar atau icon secara langsung agar 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.

Apa sih keunggulan Material Icons?

Material Icons ini di buat oleh Team Google sebagai bentuk icon khusus untuk Material Design yang sudah diterapkan ke hampir semua aplikasi milik Google. Tentu saja icon ini lebih terlihat modern dibandingkan icon yang sudah lama, kekurangan material icon saat ini adalah list icon yang masih kalah banyak dibandingkan dengan Font Awesome.

Tutorial Cara Memasang Material Icons:

Langkah Pertama letakan Google Web Fonts di bawah ini tepat di atas kode </head>

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

Selain Menggunakan Web Fonts, sobat 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';
}

Selanjutnya Buka https://design.google.com/icons/

Pilih Icon yang ingin di gunakan pada blog...

Rekomendasi untuk penggunaan HTML Material Icons, Gunakan HTML seperti gambar di bawah ini.

Rekomendasi HTML Material Icons

Contoh HTML penggunaan Material Icon

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

Untuk memperbesar ukuran icon sobat hanya perlu menambah CSS berikut, sobat tidak wajib untuk mengikuti tutorial CSS berikut, karena icon akan otomatis menyamai ukuran font pada link yang sudah lebih dahulu 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 Icons melalui CSS :before dan :after, contoh kodenya seperti di bawah 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}

Tutorial Lengkapnya : Google Github

Itulah tutorial Cara Memasang Material Design Icons di Blogger yang bisa saya bagikan kali ini, Terima kasih.

Dunia Blanter