Font awesome banyak digunakan sebagai alternative lain untuk menampilkan Icon pada blog. Jadi kita tak perlu repot lagi dalam mencari gambar vector ataupun image yang dengan format file .png atau .ico karena font awesome juga dapat menampilkan Icon dengan warna dan ukuran sebagaimana yang kita inginkan.
Kelebihan dari penerapan font awesome pada blog yaitu Icon akan muncul nantinya jauh lebih baik dibanding menggunakan gambar vektor atau file image .png atau .ico karena font awesome mempunyai resolusi yang sangat tinggi dan itu berbeda jika kalau menggunakan gambar yang kadang hasilnya tidak sesuai yang diinginkan.
Maka pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Memasang Code Font Awesome Pada Blogger. Berikut adalah langkah-langkah yang harus kalian terapkan.
Cara Mudah Memasang Kode Font Awesome Pada Blogger
1. Dari Dashboard masuk ke Tema > Edit HTML
2. Cari code </head> dan letakkan code dibawah ini diatasnya
Cara Mengaplikasikan Font Awesome Pada Blogger
Jika Code Font Awesome sudah terpasang pada template blog anda, sekarang saatnya anda belajar mengaplikasikannya pada blog. Silahkan ikuti tutorial di bawah ini.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />Cara Mengaplikasikan Font Awesome Pada Blogger
Jika Code Font Awesome sudah terpasang pada template blog anda, sekarang saatnya anda belajar mengaplikasikannya pada blog. Silahkan ikuti tutorial di bawah ini.
Cara Melihat Daftar Icons Font Awesome
Anda dapat melihat daftar Icons Font Awesome yang tersedia di http://fontawesome.io/icons/
Cara Menggunakan Font Awesome
Untuk menampilkan Icons Font Awesome pada blog ada 2 cara yaitu :
Dari code di atas kita melihat adanya tag pembuka <i> dan </i> sebagai penutup. Itu adalah kode pemanggil fa-camera-retro yang akan diurai menjadi icon camera.
Cara Merubah Ukuran Font Awesome
Jika merasa font awesome tersebut terlalu kecil, anda tak perlu khawatir karena anda tinggal mengganti fa-1g ke fa-2x, Sebagai contoh lihat code dibawah ini:
Yang membedakan code-code diatas adalah "fa-2x, fa-23x" dan seterusnya.
Cara Membuat Efek Spin Font Awesome
Anda juga dapat memberikan efek berputar [spin] font awesome tersebut seperti dalam menu coming soon di blog ini. Sebagai contoh lihat code dibawah ini:
Dari code diatas menunjukkan fa-cog adalah code gir dan fa-spin adalah code yang memberikan efek purtaran pada gir sedangkan fa-3x adalah ukuran atau zise font awesome gir.
Cara Memasang Font Awesome Pada Menu Atau Link
Selanjutnya adalah cara pemasang code awesome di menu atau link. Sebagai contoh lihat code dibawah ini:
ganti fa-globe sesuai keinginan anda
ganti http://www.goindoti.blogspot.com/ dengan url link yang ingin dikaitkan
ganti personal blog dengan judul anda
Cara Mengubah Warna Font Awesome
Terakhir adalah cara mengubah warna font awesome. Untuk cara ini kita hanya perlu menambahkan inline code css dibelakang code awesome. Sebagai contoh lihat code dibawah ini:
ganti #c32cc1 dengan code warna yang anda inginkan
Cara Melihat Penerapan Lain Pada Font Awesome
Untuk lebih jelasnya silahkan kunjungi link berikut http://fontawesome.io/examples/
Anda dapat melihat daftar Icons Font Awesome yang tersedia di http://fontawesome.io/icons/
Cara Menggunakan Font Awesome
Untuk menampilkan Icons Font Awesome pada blog ada 2 cara yaitu :
- Pada Template Blog (Edit HTML) Maka Font Awesome akan muncul di Menu Tampilan Blog.
- Pada Postingan Blog (Mode HTML) Maka Font Awesome akan muncul di Postingan Blog.
<i class="fa fa-camera-retro fa-lg"></i>Dari code di atas kita melihat adanya tag pembuka <i> dan </i> sebagai penutup. Itu adalah kode pemanggil fa-camera-retro yang akan diurai menjadi icon camera.
Cara Merubah Ukuran Font Awesome
Jika merasa font awesome tersebut terlalu kecil, anda tak perlu khawatir karena anda tinggal mengganti fa-1g ke fa-2x, Sebagai contoh lihat code dibawah ini:
<i class="fa fa-camera-retro fa-1g"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>Yang membedakan code-code diatas adalah "fa-2x, fa-23x" dan seterusnya.
Cara Membuat Efek Spin Font Awesome
Anda juga dapat memberikan efek berputar [spin] font awesome tersebut seperti dalam menu coming soon di blog ini. Sebagai contoh lihat code dibawah ini:
<i class="fa fa-cog fa-spin fa-3x"></i>Dari code diatas menunjukkan fa-cog adalah code gir dan fa-spin adalah code yang memberikan efek purtaran pada gir sedangkan fa-3x adalah ukuran atau zise font awesome gir.
Cara Memasang Font Awesome Pada Menu Atau Link
Selanjutnya adalah cara pemasang code awesome di menu atau link. Sebagai contoh lihat code dibawah ini:
<a class="fa fa-globe fa-3x" href="http://www.goindoti.blogspot.com/"> personal blog </a>ganti fa-globe sesuai keinginan anda
ganti http://www.goindoti.blogspot.com/ dengan url link yang ingin dikaitkan
ganti personal blog dengan judul anda
Cara Mengubah Warna Font Awesome
Terakhir adalah cara mengubah warna font awesome. Untuk cara ini kita hanya perlu menambahkan inline code css dibelakang code awesome. Sebagai contoh lihat code dibawah ini:
<i class="fa fa-refresh fa-spin fa-2x" style="color: #c32cc1;"></i>ganti #c32cc1 dengan code warna yang anda inginkan
Cara Melihat Penerapan Lain Pada Font Awesome
Untuk lebih jelasnya silahkan kunjungi link berikut http://fontawesome.io/examples/
Cukup mudah bukan Cara Mudah Memasang Code Font Awesome Pada Blogger. Bila kamu mengalami kesulitan dalam menerapkannya pada blog kalian silahkan tinggalkan pesan di kolom komentar. Semoga informasinya bermanfaat dan sampai jumpa.