Cara Pasang Material Iconts Font For The Web Di Blog
Ini yaitu sebuah kabar baik untuk web developer atau blogger yang suka ngoprek template blog. Selain Font Awesome, sekarang ada font icon gres dari Google yang sanggup kita gunakan ntuk menghias blog tercinta kita yaitu Material Icons.Cara penerapannya pun cukup gampang menyerupai halnya Font Awesome dengan kostomisasi memakai CSS. Ada terdapat banyak material icon yang sanggup kita gunakan, namun sayang ketika ini belum tersedia ikon sosmed. Namun aku yakin kedepannya niscaya akan tersedia juga ikon sosmed dan ikon-ikon gres lainnya, jadi material icon ini layak kita coba.
Contoh penampakan material icon ini menyerupai tampak di bawah ini.
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 isyarat </style> atau di atas isyarat ]]></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 isyarat HTML dari tiap-tiap ikon yang ingin kita gunakan dari Material Icons Library. Silahkan klik ikon yang kita pilih lalu klik tab Icon Font di pojok kanan bawah. Lalu silahkan copy isyarat HTML ikon tersebut, sebagai teladan menyerupai di bawah ini.
<i class="material-icons">home</i>
Atau sanggup mengunakan dengan isyarat HTML Entity menyerupai di bawah ini.
<i class="material-icons"></i>
3. Kustomisasi Ikon
Material icons ini sangat gampang kita kustomisasi baik ukuran maupun warnanya dengan CSS.
Ukuran ikon ini akan mengikuti ukuran font di kawasan ikon diletakan alasannya yaitu sudah kita setting pada CSS dengan
font-size:inherit. Namun untuk ukuran ikon, kita sanggup merubahnya dengan menambahkan sebuah class dengan font-size menyerupai 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;}
<i class="material-icons md-16"></i>
<i class="material-icons md-18"></i>
<i class="material-icons md-24"></i>
<i class="material-icons md-36"></i>
<i class="material-icons md-48"></i>Untuk warna ikon, kita juga tinggal menambahkan
class dengan color menyerupai 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;}
<i class="material-icons md-36 md-red"></i>
<i class="material-icons md-36 md-yellow"></i>
<i class="material-icons md-36 md-green"></i>
<i class="material-icons md-36 md-blue"></i>
<i class="material-icons md-36 md-grey"></i>Selain itu kita juga sanggup menambahkan style CSS lainnya yang kita inginkan dengan penambahan sebuah class menyerupai di atas.
Bagaimana, gampang bukan? Selamat mencoba.
Sumber https://www.kompiajaib.com/
0 Response to "Cara Pasang Material Iconts Font For The Web Di Blog"
Posting Komentar