Material Icons for Blogger - Kembali lagi blog dunia blanter membagikan tutorial perihal material design, kali ini aku akan menunjukkan tutorial cara memasang material icons di blogger.
Selain dengan goresan pena kita membutuhkan gambar atau icon secara eksklusif supaya lebih gampang memahami arti dari goresan pena pada hidangan blog. Ada beberapa platform yang menyediakan font icon ini untuk website misalnya menyerupai 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 ketika ini ialah 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 sempurna di atas instruksi
</head><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>Selain Menggunakan Web Fonts, teman juga dapat memakai
@font-face letakan di atas instruksi ]]></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...
Rekomendasi untuk penggunaan HTML Material Icons, Gunakan HTML menyerupai gambar di bawah ini.
 |
| Rekomendasi HTML Material Icons |
Contoh HTML penggunaan Material Icon
<i class='material-icons'>account_circle</i>
Untuk memperbesar ukuran icon teman hanya perlu menambah CSS berikut, teman tidak wajib untuk mengikuti tutorial CSS berikut, alasannya ialah icon akan otomatis menyamai ukuran font pada link yang sudah lebih dahulu memakai 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 instruksi html icon menjadi menyerupai 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 ialah ukuran font.
Untuk memasang Material Icons melalui CSS :before dan :after, pola kodenya menyerupai 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 dapat aku bagikan kali ini, Terima kasih.
