Tutorial dasar cara memasang dan menggunakan Font Awesome

HaiSob apa kabar? pada kesempatan ini haisob.com akan membahas tentang Font Awesome cara memasangnya pada template blog dan cara menggunakan/penerapan Font Awesome pada Blog.

Dengan memasang Font Awesome Icons, kita bisa membuat ikon yang menarik dengan hanya menggunakan teks sehingga tidak terlalu mempengerahui kecepatan loading dibandingkan memakai banyak gambar ikon. Font Awesome adalah font ikonik dan merupakan bagian dari pengembangan Bootstrap. Icon-icon yang digunakan berbasis gambar vector yang bisa diatur ukurannya sesuai ukuran font.

Ikon-ikon Font Awesome ini bisa dikostumisasi sedemikian rupa dan dapat digunakan oleh website apa saja. Ukurannya sangat kecil, mudah dikostumisasi, mudah dipakai dengan berbagai modifikasi sesuai platform, dan bisa diatur ukurannya dengan tampilan resolusi yang tetap baik. Desainnya sangat profesional sehingga membuat layout tampak elegan.

Dengan menggunakan Font Awesome, antarmuka website jadi lebih mudah diakses. Keuntungan lain dengan adanya Font Awesome kamu bisa membuat tampilan web kamu lebih keren dengan adanya gambar-gambar ikon yang bisa menambah daya tarik web/blog anda.

Cara Memasang Font Awesome di Blogger


1. Di Blog Bloger 😀
2. Pilih menu Template ➔ Edit HTML
Cara Memasang Font Awesome di Blogger
Template - Edit HTML

3. Tambahkan kode berikut dibawah kode <head> atau diatas kode </head> atau diatas kode <body>.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
4. Save template.

Cara Menggunakan Font Awesome Pada HTML atau Template


Kamu bisa menggunakan Font Awesome ini dimana saja, misalanya di bagian menu ataupun di dalam postingan. ( Untuk melihat library berbagai ikon, gunakan halaman ini) Untuk memunculkan font awesome ini adalah dengan menggunakan tag <i> dan menambahkan class utama (fa) dan class untuk memanggil ikon tertentu.

Contoh dibawah ini saya mengambil icon dari Font Awesome "home"
<i class="fa fa-home"></i>
Dan Hasilnya:



Untuk mengganti ukuran atau memperbesarnya kamu dapat mencoba fa-lg (33% increase), fa-2x, fa-3x, fa-4x, dan fa-5x . contohnya
<i class="fa fa-home fa-lg"></i>  contoh ditambah : fa-lg
<i class="fa fa-home fa-2x"></i> contoh ditambah fa-2x
<i class="fa fa-home fa-3x"></i> contoh ditambah fa-3x
<i class="fa fa-home fa-4x"></i> contoh ditambah fa-4x
<i class="fa fa-home fa-5x"></i> contoh ditambah fa-5x
Dan hasilnya:

contoh ditambah : fa-lg
contoh ditambah fa-2x
contoh ditambah fa-3x
contoh ditambah fa-4x
contoh ditambah fa-5x

Untuk pengaturan warna, ukuran dan style lainnya Anda juga bisa menggabungkan class CSS yang sesuai. Misalnya :
<i class="fa fa-comments-o fa-4x"></i> contoh ditambah fa-4x
<style>
.fa-comments-o {padding:0;  margin:0; float:left;padding:5px 0px; color:#F2784B;}
</style>
Dan hasilnya:



Untuk menerapkan pada postingan, sebaiknya kamu menggunakan mode "HTML" bukan mode "compose". dan saya sering menggunakan browser chrome agar lebih mudah penulisannya. Ini juga berlaku pada widget HTML/Javascript.

Cara menggunakan Font Awesome melalui CSS content


Nah kali ini kita akan menambahkan kode dalam CSS (untuk list daftar iconnya lihat halaman ini). Contoh, misal kamu ingin menambahkan gambar ikon pada bagian judul gadget di sidebar blog.

Untuk memasang ikon Font Awesome sebelum judul Artikel Populer pada sidebar, kamu dapat gunakan contoh penulisan kode CSS dan Font awesome seperti berikut :
.sidebar h2:before { content: "\f02c";
  font-family: FontAwesome;color:#F2784B;margin-right: 8px;
  display: inline-block;
  line-height: 1em; }
Kode ikon disini adalah "\f02c" dari [&#xf02c;] . Kunci dari cara ini, selain dari penggunaan pseudo class before Anda juga harus selalu menggunakan font-family : FontAwesome. Dan juga jika diperlukan tambahkan property display dan line-height seperti contoh diatas, agar fungsi ikon tersebut bisa bekerja dengan baik. atau kamu bisa menggunakan ukuran px untuk mengatur besarnya ikon misalnya: font-size: 18px; selebihnya silahkan atur sendiri sesuai selera kamu.

Sekian tutorial kali ini, semoga bermanfaat.
Join This Site