Blogger | Cara Ubay - Font Awesome adalah kumpulan icon yang dibuat sedemikian rupa, dan menggunakan system Font Icon yang memungkinkan kita untuk merubah warna dan ukuran font dengan menggunakan CSS tanpa takut icon menjadi pecah-pecah dan tentunya lebih ringan daripada Image Icon.
Sejak Google Code resmi ditutup pada bulan Maret 2015, dimana Google Code berfungsi sebagai tempat hosting file yang paling banyak digunakan oleh Blogger dan banyak juga digunakan oleh pengguna diluar kelompok Blogger, termasuk untuk menyimpan file Font Awesome, sebagai pengganti Google Code adalah Google Drive yang telah di publish pada bulan April 2012.
Baca juga : Cara Memasang Font Awesome pada Blogger
Baca juga : Cara Memasang Font Awesome pada Blogger
Cara Meletakkan Font Awesome pada Google Drive
- Download Font Face Kit Font Awesome disini
- Setelah didownload ekstrak berkas rar tersebut
- Setelah di ekstrak, buka folder fonts, dan upload file font tersebut kecuali file FontAwesome.otf pada google drive sobat
No. 1 klik baru untuk membuat folder baru pada Google Drive;
No. 2 klik folder untuk mengunggah file Silahkan beri nama folder sesuai keinginan sobat (misal : fontawesome).
- Bagikan font awesome yang sudah sobat upload ke Google Drive tadi, seperti gambar dibawah ini :
No. 1 copy paste kode unik yang tertera pada kotak nomor 1 simpan dalam notepad;
No. 2 rubah dapat mengedit menjadi dapat melihat;
No. 3 klik lanjutkan, maka akan tampil gambar seperti dibawah ini :
Keterangan : klik ubah, maka akan tampil gambar dibawah ini:
Keterangan : klik Selesai, lalu langkah selanjutnya adalah sebagai berikut :
- Buka file notepad hasil copy paste kode unik tadi, seperti gambar dibawah ini :
//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk
- Edit file font-awesome.min , file tersebut berada di file fontawesome yang sudah diupload pada Google Drive : folder fontawesome >> CSS, buka file yang bernama font-awesome.min, lalu temukan kode sebagai berikut :
/*!
* Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
* Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
- Ganti kode ../fonts dengan kode unik yang sudah diubah dari notepad tadi //googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk
/*!
* Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@font-face{font-family:'FontAwesome';
src:url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.eot?v=4.3.0');
src:url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.woff?v=4.3.0') format('woff'),url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal;
}
* Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
@font-face{font-family:'FontAwesome';
src:url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.eot?v=4.3.0');
src:url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.woff?v=4.3.0') format('woff'),url(''//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal;
}
- Langkah selanjutnya adalah simpan file CSS font-awesome.min tersebut pada Google Drive, jangan lupa untuk share file seperti langkah sebelumnya, sehingga hasilnya akan seperti dibawah ini :
<link rel="stylesheet" href="//googledrive.com/host/0B801kJp06hUCcm9CS3JZMFB2NUk"/>
- Letakkan file tersebut diatas setelah kode <head> atau sebelum kode </head> pada template sobat, lalu simpan.
Cara pemanggilan file font-awesome setelah tertanam di Google Drive
<i class="fa fa-dashcube"></i>
ATAU
<i class='icon fa fa-picture-o icon-large'/>
Demikian cara meletakkan Font Awesome pada Google Drive, semoga dapat dipasang pada blog sobat.
Salam Blogger,
Terima kasih, telah berkunjung pada Cara Meletakkan Font Awesome pada Google Drive, semoga bermanfaat dan sesuai pada pencarian sobat tentang Cara Meletakkan Font Awesome pada Google Drive.
Post a Comment