Cara Menggunakan Font Awesome dengan Benar (Clear Render Css)

Font awesome pasti sudah tidak asing lagi sama jenis font ini untuk design template blog atau websaite, 99% websaite atau template blog pasti ada code font awesome di template nya.


Karna font awesome selain bagus juga tidak membebani loading suatu blog atau websaite.
Tapi jika anda cermat mungkin akan mengetahui render css font awesome jika dilihat di pagespeed atau jika anda menaruh link stylesheet di bawah kode head atau diatas kode </head, memang tidak terlalu mempengaruhi loading suatu blog, tapi bagi sebagian blogger mungkin risih jika score loading blognya tidak hijau atau tidak diatas 85/100.

Cara Menggunakan Font Awesome dengan Benar (Clear Render Css)


Lantas untuk memperbaiki suatu render css font awesome ada beberapa cara salah satunya bisa di baca di artikel yang

 "Cara Mengatasi (Mengoptimalkan CSS) Eliminate Render Blocking CSS Terbaru " 

tapi apakah kalian tahu jika cara tersebut ialah ibarat mempending atau mempause terlebih dahulu lalu akan di load diakhir loading, contoh nya suatu web pasti awal mungkin font tidak muncul lalu diakhir loading baru muncul font awesome tersebut.


Lantas bagaimana cara efekrif untuk mengatasi solusi tersebut?

Kalau saya sendiri menggunakan font awesome langsung di template, memakai font awesome seperlunya saja, tidak semua saya pakai..

Penerapanya seperti berikut :

<style type='text/css'>
/*<![CDATA[*/
@font-face{
font-family:'FontAwesome';
src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?v=4.4.0');
src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}
.fa{
display:inline-block;
font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.fa-user:before{content:"f007"}
.fa-calendar-check-o:before{content:"f274"}
.fa-arrow-up:before{content:"f062"}
.fa-google-plus:before{content:"f0d5"}
.fa-facebook:before{content:"f09a"}
.fa-twitter:before{content:"f099"}
.fa-paperclip:before{content:"f0c6"}
.fa-link:before{content:"f0c1"}
.fa-download:before{content:"f019"}
.fa-tag:before {content: "f02b"}
.fa-comments:before {content: "f086"}
.fa-home:before {content: "f015"}
.fa-bars:before {content: "f0c9"}
.fa-plus:before {content: "f067"}
.fa-spinner:before {content: "f110"}
.fa-angle-double-up:before {content: "f102"}
.fa-cogs:before {content: "f085"}
.fa-download:before {content: "f019"}
.fa-linkedin:before {content: "f0e1"}
.fa-pinterest:before {content: "f0d2"}
.fa-caret-square-o-down:before {content: "f150"}
.fa-paper-plane-o:before {content: "f1d9"}
.fa-newspaper-o:before {content: "f1ea"}
/*]]>*/
</style>

Sebelum kode style yang terakhir bisa digunakan untuk css yang lain misal css menu, label,popular post and etc lah.

Lalu untuk menambahkan font awesome lain atau kode icon lain tinggal copas code pemanggilnya serta kode unicodenya setiap icon awesome ada icon unicodenya.
Contoh untuk facebook icon
Kode pemanggil "fa fa-facebook" unicodenya "f09a"
Maka untuk menambahkan ialah dibawah kode awesome yg terakhir seperti berikut :
.fa-facebook:before{content:"f09a"}

Intinya kita memakai font awesome yang perlu atau seperlunya saja , jadi harus manual setiap kita ingin menambah icon baru harus menambah kode unicode dan pemanggilnya, jika sudah ada maka tidak perlu menambahkan ulang.

Sekian ya ....:]
Share This :

Artikel terkait : Cara Menggunakan Font Awesome dengan Benar (Clear Render Css)

Posting Lebih Baru Posting Lama

0 komentar: