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 bagian dari pengembangan Bootstrap.

Ikon-ikon Font Awesome ini bisa dikostumisasi sedemikian rupa dan dapat digunakan oleh website apa saja. Dengan size yang kecil, desain profesional mudah dalam dkostumisasi, mudah dipakai dimodifikasi sesuai platform, dan bisa diatur ukurannya dan tampilan resolusinya yang tetap baik.

Cara Menggunakan Font Awesome di Blogger
Tutorial Cara Menggunakan Font Awesome di Blogger


Cara Menggunakan Font Awesome di Blogger


1. Di Blog Bloger 😀
2. Pilih menu 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.

Menggunakan Font Awesome Pada HTML Blog


Kamu bisa menggunakan Font Awesome ini dimana saja, misalanya di bagian menu ataupun di dalam postingan.

Untuk melihat library kumpulan berbagai ikon font awesome, gunakan halaman ini

Cara memunculkan ikon font awesome ini adalah dengan menggunakan tag <i> dan menambahkan class utama (fa) dan class untuk memanggil ikon tertentu. Contoh di bawah 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.

Menggunakan Font Awesome Pada CSS


Nah kali ini kita akan menambahkan kode dalam CSS (untuk list daftar iconnya lihat halaman ini). Contohnya misalnya jika kamu ingin menambahkan ikon di judul gadget yang ada di sidebar blog.

Cara memasang ikon Font Awesome sebelum judul Artikel Populer di sidebar, kamu dapat gunakan contoh penulisan kode CSS dan Font awesome seperti ini:

.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.
0 Komentar untuk "Cara Mudah Menggunakan Font Awesome di Blogger"