Ditulis oleh: Ditulis pada: 11/02/2015
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...