Pehawe Official

Home
Blogger

Cara Memasang Material Design Icons di Blog

Dengan menggunakan Material Design Icons ini, kita akan dipermudah untuk menentukan ikon menu, label maupun ikon yang akan kita pasang di artikel blog kita
Cara Memasang Material Design Icons di Blog - Sesuai dengan namanya Material Design Icon adalah sebuah gambar icon web yang khusus di gunakan untuk di pasang web atau blog. Dengan menggunakan Material Design Icons ini, kita akan dipermudah untuk menentukan ikon menu, label maupun ikon yang akan kita pasang di artikel blog kita.


Material Design Icons di Blogger

Material Icons ini di buat oleh team google sebagai icon khusus untuk Material Design yang telah di terapkan hampir ke semua aplikasi Google.

Cara Memasang Material Design Icons di Blog

Langkah Pertama, Salin dan Letakkan kode Google Web Font di bawah ini tepat di atas atau sebelum kode </head>

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

Selain menggunakan Kode Web Font diatas, sobat juga bisa menggunakan @font face di bawah ini dan letakkan sebelum 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';

}

Langkah selanjutnya silahkan buka https://design.google.com/icons/, Kemudian pilih icon yang akan sobat gunakan. Cek gambar di bawah ini :

Silahkan gunakan kode CSS untuk merubah ukuran icons dibawah ini, sebenarnya sobat tidak di wajibkan untuk menggunakan kode CSS dibawah ini, karena biasanya kode tersebut otomatis menyesuaikan ukuran mengikuti ukuran font size blog sobat. Berikut adalah kode CSS yang berfungsi merubah ukuran google icons :

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

Sobat juga bisa menggunakan cara di bawah ini untuk merubah ukuran google icons,

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

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

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

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

Untuk menerapkan icons melalui CSS :before dan :after , maka terapkan seperti kode berikut :

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

Sekian tutorial tentang Bagaimana Cara Memasang Material Design Icons di Blog, untuk tutorial singkatnya silahkan kunjungi link berikut http://google.github.io/material-design-icons/ Terima Kasih.