Cara Meningkatkan Secara Optimal Font Awesome Dengan Google Drive

Dengan font awesome, kita sanggup dengan gampang untuk menciptakan sebuah ikon di dalam blog menyerupai ikon untuk sosial media, tombol sharing, dan lainnya. Namun kalau kita menyimpan link font awesome begitu saja maka akan menimbulkan 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 sekarang kita akan membahas cara lain untuk mengatasi blocking render css font awesome sekaligus mengoptimalkan penggunaannya. Artinya kita hanya memakai css font awesome hanya untuk ikon yang digunakan.

Kita tahu, untuk versi terbaru font awesome dikala ini (versi 4.4) mempunyai 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 contohnya kita hanya memakai 10 ikon untuk blog kita. Kaprikornus sebaiknya kita hanya memakai style css dari 10 ikon yang kita gunakan saja.

Agar sanggup hanya memakai style css dari ikon font awesome yang kita gunakan saja, maka yang harus kita lakukan yaitu 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 menyerupai 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 mendapat 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 menyerupai 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 aba-aba 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 aba-aba css-nya menyerupai berikut:

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

Begitu seterusnya untuk ikon lainnya sehingga sebagai pola secara keseluruhan akan menjadi menyerupai 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 menyerupai fa-lg, fa-2x, fa-3x, fa-spin, dan lainnya silahkan tambahkan juga.

Bagaimana, menjadi lebih simple dan ekonomis bukan?

Semoga berguna...
Sumber https://www.kompiajaib.com/

Share this post