Cara Memasang Code Font Awesome di Website Blog

cara memasang code font awesome di website atau blog

Font awesome banyak digunakan guna untuk mendandan atau mempercantik tampilan website blog. Font awesome hanya akan muncul dalam laman tampilan blog jika kita memasang kode pemanggil fontnya seperti dalam gambar diatas dimana code "fa fa-smile" akan diolah menjadi icon smile atau senyum.

Jadi kita tak perlu repot lagi dalam mencari gambar vector ataupun image yang dengan file .png karena font awesome juga dapat kita sesuaikan warna dan ukuran sebagaimana yang kita suka dan ingin pasangkan diwebsite dan tentunya lebih terlihat prefesional dan efektif dimata pengunjung.

Selain dari pada itu, font awesome yang akan muncul nantinya jauh lebih baik dibanding menggunakan gambar vektor atau file image .png karena awesome mempunyai resolusi yang sangat tinggi dan itu beda jika kalau menggunakan gambar yang kadang hasilnya tidak sesuai yang diinginkan.

Daftar icons font awesome dapat anda lihat di http://fontawesome.io/icons/

Cara memasang code icon font awesome di website blog
1. Dari dashboard masuk ke tema/template
2. Edit HTML
3. Cari code dan letakkan code dibawah ini diatasnya

4. Save atau simpan template

Code font awesome sudah terpasang di website blog anda dan untuk mengaplikasikannya silahkan simak cara-cara dibawah ini:

Cara Menggunakan Font Awesome

Seperti dalam gambar yang saya jelaskan sebelumnya dimana "fa fa-smile" akan menghasilkan icon senyum. Untuk contoh saya akan gunakan icon camera, lihat code berikut

<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 seperti ini dibawah ini:

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-lg"></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 dan untuk hasilnya seperti dibawah ini:

fa-1g
fa-2x
fa-3x
fa-4x
fa-5x

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 menunnjukkan 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. Untuk hasilnya seperti dibawah ini:

Selanjutnya adalah cara pemasang code awesome di menu atau link.

<a class="fa fa-globe fa-3x" href="http://www.buginese.id/"> buginese blogger </a>

Hasilnya akan seperti dibawah ini:
buginese blogger
Ket. code: ganti fa-globe sesuai keinginan anda
ganti http://www.buginese.id/ dengan url link yang ingin dikaitkan
ganti buginese blogger dengan judul anda

Terakhir adalah cara mengubah warna font awesome. Untuk cara ini kita hanya perlu menambahkan inline code css dibelakang code awesome. untuk contoh perhatikan dibawah ini

Ket: ganti #c32cc1 dengan code warna yang anda inginkan
Hasilnya akan seperti dibawah ini:

Untuk lebih jelasnya silahkan kunjungi link berikut http://fontawesome.io/examples/
Sekian untuk ulasan artikel Cara Memasang Code Font Awesome di Website Blog. Semoga bermanfaat!

Cara Memasang Code Font Awesome di Website Blog

Akbar

Rekomendasi Baca

Cara Memasang Code Font Awesome di Website Blog

Baca Juga

Akbar

Rekomendasi Baca