11 June 2016

Cara Memasang Material Design Icons di Blogger

Cara Memasang Material Design Icons di Blogger

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.

account_circlefeedbackhomecommentandroid

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...

Material Icons Tutorial

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

Rekomendasi HTML Material Icons
Rekomendasi HTML Material Icons

Contoh HTML penggunaan Material Icon

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


Material Icons Tutorial 2

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.
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

Add Your Comments comment

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic