Cara Memasang Icon Font Awesone Untuk Blogger
Description:
Cara Menggunakan dan Menerapkan Icon Font Awesome Untuk Blogger ~ Font Awesome adalah font web yang berisi kumpulan icon, sehingga ketika ingin menggunakan icon-icon tertentu kita tidak perlu menggunakan gambar dengan cara menguploadnya gambar tersebut ke blog, cukup menggunakan font awesome saja.
Dengan menggunakan Font Awesome Icons di Blogger, kita bisa membuat icon yang menarik dengan hanya menggunakan teks sehingga tidak terlalu mempengarihu kecepatan loading dibandingkan memakai banyak gambar icon. Icon-icon Font Awesome ini bisa dikostumisasi sedemikian rupa dan dapat digunakan oleh website apa saja. Ukurannya juga bisa disesuaikan dengan template blog yang sedang Anda pakai, mudah di kostumisasi, mudah dipakai dengan berbagai modifikasi sesuai platform, dan bisa juga di atur ukurannya dengan tampilan resolusi yang tetap baik, dan disainnya pun sangat profesional sehingga membuat layout tampak elegan.
Login ke akun Blogger Anda > Template > Edit HTML. Kemudian Anda tambahkan kode berikut ini di atas kode </head>
Buka halaman berikut ini, dan Anda cari icon yang Anda perlukan https://material.io/icons/
- Silakan Anda taruh kode tersebut sebelum atau sesudah widget yang hendak Anda berikan icon
Jika sudah diterapkan, tinggal Save, jika sudah maka icon yang Anda terapkan akan muncul di mana Anda terapkan icon tersebut. Jika ingin merubah ukuran icon tersebut, maka Anda berikan kode berikut ini ke-icon yang Anda buat tadi
Untuk penerapan icon melalui CSS :before dan :after, contoh kodenya seperti dibawah ini:
Dengan menggunakan Font Awesome Icons di Blogger, kita bisa membuat icon yang menarik dengan hanya menggunakan teks sehingga tidak terlalu mempengarihu kecepatan loading dibandingkan memakai banyak gambar icon. Icon-icon Font Awesome ini bisa dikostumisasi sedemikian rupa dan dapat digunakan oleh website apa saja. Ukurannya juga bisa disesuaikan dengan template blog yang sedang Anda pakai, mudah di kostumisasi, mudah dipakai dengan berbagai modifikasi sesuai platform, dan bisa juga di atur ukurannya dengan tampilan resolusi yang tetap baik, dan disainnya pun sangat profesional sehingga membuat layout tampak elegan.
Cara Menerapkan Icon di Blogger
Langkah pertama :Login ke akun Blogger Anda > Template > Edit HTML. Kemudian Anda tambahkan kode berikut ini di atas kode </head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>Anda juga bisa menggunakan cara lain untuk menerapkan icon di blogger ini, dengan cara menambahkan kode
@font-face dan meletakkannya di ]]></b:skin> atau </style>, berikut kodenya yang Anda bisa taruh kodenya di ]]></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 kedua :Buka halaman berikut ini, dan Anda cari icon yang Anda perlukan https://material.io/icons/
- Silakan Anda taruh kode tersebut sebelum atau sesudah widget yang hendak Anda berikan icon
Jika sudah diterapkan, tinggal Save, jika sudah maka icon yang Anda terapkan akan muncul di mana Anda terapkan icon tersebut. Jika ingin merubah ukuran icon tersebut, maka Anda berikan kode berikut ini ke-icon yang Anda buat tadi
<i class="material-icons md-48">content_copy</i>
md-48, 48 adalah ukuran font.
Untuk penerapan icon melalui CSS :before dan :after, contoh kodenya seperti dibawah 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}
Demikian tutorial yang bisa saya berikan yaitu Cara Memasang Icon Font Awesome Untuk Blogger. Dan jangan lupa untuk Share artikel ini kepada teman-teman Anda yang berada di media social seperti Facebook, Google +, dll. Dan semoga Anda senang dengan pada yang saya posting hari ini, Terimakasih telah berkunjung ke blog saya. Untuk Tutorial lebih lengkap Anda bisa mengunjungi Google Github.
Posting Komentar