Ditulis oleh: Ditulis pada: 3/08/2016
Ini adalah sebuah kabar baik untuk web developer atau blogger yang suka ngoprek template blog. Selain Font Awesome, kini ada font icon baru dari Google yang bisa kita gunakan ntuk menghias blog tercinta kita yaitu Material Icons.Cara penerapannya pun cukup mudah seperti halnya Font Awesome dengan kostomisasi menggunakan CSS. Ada terdapat banyak material icon yang bisa kita gunakan, namun sayang saat ini belum tersedia ikon sosmed. Namun saya yakin kedepannya pasti akan tersedia juga ikon sosmed dan ikon-ikon baru lainnya, jadi material icon ini layak kita coba.
Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.
1. Langkah Pertama
Silahkan simpan
@font-face material icon di bawah ini di atas kode </style> atau di atas kode ]]></b:skin>
@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. Langkah Kedua
Untuk menampilkan ikonnya di blog, kita hanya perlu meng-copy kode HTML dari tiap-tiap ikon yang ingin kita gunakan dari Material Icons Library. Silahkan klik ikon yang kita pilih kemudian klik tab Icon Font di pojok kanan bawah. Lalu silahkan copy kode HTML ikon tersebut, sebagai contoh seperti di bawah ini.
<i class="material-icons">home</i>
Atau bisa mengunakan dengan kode HTML Entity seperti di bawah ini.
<i class="material-icons"></i>
3. Kustomisasi Ikon
Material icons ini sangat mudah kita kustomisasi baik ukuran maupun warnanya dengan CSS.
Ukuran ikon ini akan mengikuti ukuran font di tempat ikon diletakan karena sudah kita setting pada CSS dengan
font-size:inherit. Namun untuk ukuran ikon, kita bisa merubahnya dengan menambahkan sebuah class dengan font-size seperti di bawah ini.
.material-icons.md-16{font-size:16px;}
.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;}
Untuk warna ikon, kita juga tinggal menambahkan
class dengan color seperti di bawah ini.
.material-icons.md-red{color:red;}
.material-icons.md-yellow{color:yellow;}
.material-icons.md-green{color:green;}
.material-icons.md-blue{color:blue;}
.material-icons.md-grey{color:grey;}
Selain itu kita juga bisa menambahkan style CSS lainnya yang kita inginkan dengan penambahan sebuah class seperti di atas.
Bagaimana, mudah bukan? Selamat mencoba.