Cara Memasang Material Design Icons Di Blog

Cara Memasang Material Design Icons di Blog - Sesuai dengan namanya Material Design Icon ialah sebuah gambar icon web yang khusus di gunakan untuk di pasang web atau blog. Dengan memakai Material Design Icons ini, kita akan dipermudah untuk memilih 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 arahan Google Web Font di bawah ini sempurna di atas atau sebelum arahan </head>

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

Selain memakai Kode Web Font diatas, teman juga dapat memakai @font face di bawah ini dan letakkan sebelum arahan ]]></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 teman gunakan. Cek gambar di bawah ini :

Silahkan gunakan arahan CSS untuk merubah ukuran icons dibawah ini, bekerjsama teman tidak di wajibkan untuk memakai arahan CSS dibawah ini, alasannya ialah biasanya arahan tersebut otomatis menyesuaikan ukuran mengikuti ukuran font size blog sobat. Berikut ialah arahan 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 dapat memakai 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 menyerupai arahan 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 wacana Bagaimana Cara Memasang Material Design Icons di Blog, untuk tutorial singkatnya silahkan kunjungi link berikut http://google.github.io/material-design-icons/ Terima Kasih.

Share this post