Cara Optimasi Font Awesome Dengan Google Drive

Cara Optimasi Font Awesome Dengan Google Drive

Bola Hero Gawai

Cara Optimasi Font Awesome Dengan Google Drive

Cara Optimasi Font Awesome Dengan Google Drive
Dengan font awesome, kita bisa dengan mudah untuk membuat sebuah ikon di dalam blog seperti ikon untuk sosial media, tombol sharing, dan lainnya. Namun jika kita menyimpan link font awesome begitu saja maka akan menyebabkan blocking render css. Untuk itu saya sudah pernah membahas cara mengatasi render blocking CSS dari font awesome pada link di bawah ini.

Baca juga: Mengatasi Render Blocking CSS Font Awesome

Nah kini kita akan membahas cara lain untuk mengatasi blocking render css font awesome sekaligus mengoptimalkan penggunaannya. Artinya kita hanya menggunakan css font awesome hanya untuk ikon yang digunakan.

Kita tahu, untuk versi terbaru font awesome saat ini (versi 4.4) memiliki 585 ikon, artinya di dalam link css font awesome terdatan 585 style css, silahkan Anda lihat di sini. Dan kedepannya ini kemungkinan akan bertambah banyak lagi. Padahal misalnya kita hanya menggunakan 10 ikon untuk blog kita. Jadi sebaiknya kita hanya menggunakan style css dari 10 ikon yang kita gunakan saja.

Agar bisa hanya menggunakan style css dari ikon font awesome yang kita gunakan saja, maka yang harus kita lakukan adalah meng-hosting sendiri font awesome-nya. Seperti cara meng-hosting sendiri web font yang saya bahas pada postingan sebelumnya, kita juga akan menyimpan font awesome di Google Drive.

Baca juga: Menyimpan Web Fonts Di Google Drive

Pertama kita akan memerlukan @font-face dari font awesome seperti di bawah ini


@font-face{
   font-family:'FontAwesome';
   src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');
   src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
   url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
   url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
   url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
   url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
   font-weight:normal;
   font-style:normal
}

Untuk mendapatkan file font fontawesome-webfont.eot,fontawesome-webfont.woff,fontawesome-webfont.woff2,fontawesome-webfont.ttf,fontawesome-webfont.svg, silahkan download font face kit font awesome di sini.

Setelah didownload silahkan ekstrak file downloadnya dan buka folder fonts dan silahkan upload file font tersebut di Google Drive kecuali file FontAwesome.otf sampai didapat link host Google Drive untuk masing-masing file font-nya.

Baca juga: Cara Upload File, HTML, CSS, Javascript Di Google Drive

Kemudian silahkan ganti url font pada @font-face di atas dengan url hosting Google Drive untuk masing-masing jenis file font-nya. Kemudian silahkan simpan @font-face di edit HTML blog di atas kode ]]></b:skin>.

Kemudian simpan juga css style untuk class fa font awesome seperti di bawah ini.


.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
}

Kemudian silahkan catat ikon apa saja yang kita gunakan di blog. Selanjutnya silahkan cari kode css style untuk masing-masing ikon yang kita gunakan di sini. Gunakan CTRL + F untuk memudahkan pencarian. Misalnya untuk ikon facebook dengan tag <i class="fa fa-facebook"></i> maka silahkan cari dengan CTRL + F untuk fa-facebook. Maka kode css-nya seperti berikut:


.fa-facebook:before{content:"\f09a"}

Begitu seterusnya untuk ikon lainnya sehingga sebagai contoh secara keseluruhan akan menjadi seperti di bawah ini.


@font-face{
   font-family:'FontAwesome';
   src:url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE EOT?v=4.4.0');
   src:url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE EOT?#iefix&v=4.4.0') format('embedded-opentype'),
   url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE WOFF2?v=4.4.0') format('woff2'),
   url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE WOFF?v=4.4.0') format('woff'),
   url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE TTF?v=4.4.0') format('truetype'),
   url('https://googledrive.com/host/KODE UNIK GOOGLE DRIVE UNTUK FILE 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-facebook:before{content:"\f09a"}
.fa-google-plus:before{content:"\f0d5"}
.fa-twitter:before{content:"\f099"}
.fa-plus:before{content:"\f067"}
.fa-linkedin:before{content:"\f0e1"}
.fa-youtube:before{content:"\f167"}
.fa-plus-square:before{content:"\f0fe"}
.fa-bell:before{content:"\f0f3"}
.fa-code:before{content:"\f121"}

Jika ada pengaturan lainnya seperti fa-lg, fa-2x, fa-3x, fa-spin, dan lainnya silahkan tambahkan juga.

Bagaimana, menjadi lebih simple dan irit bukan?

Semoga berguna...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×