Cara Memasang Font Awesome di Blogger

Artikel ini menjelaskan cara memasang font awesome dan cara menerapkannya di blogger atau situs.

Font awesome berguna mengurangi penggunaan icon dalam bentuk gambar pada tampilan situs. Anda tidak perlu lagi repot-repot dan susah mencari atau mendesain icon gambar untuk kebutuhan tampilan tertentu di situs. Apa itu font awesome? Font awesome adalah font web yang berbentuk icon siap pakai untuk antarmuka web menggunakan pemanggil CSS, umumnya digunakan untuk Twitter Bootstrap. Ada ratusan lebih icon di Font awesome dan akan bertambah tiap rilisnya.


Pertama silahkan pasang CSS font awesome di atas tag </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Setelah Anda menambahkan CSS di atas kini saatnya kita coba menerapkan font awesome tersebut. Misalnya kita akan menggunakan font awesome pada menu.

<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
<li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
</ul>

hasilnya akan tampak seperti berikut.

• Home
• Library
• Article
• Settings

Font awesome ini juga memiliki efek CSS yang mudah untuk di panggil, lihat contoh berikut.

<i class="fa fa-spinner"></i>
<i class="fa fa-refresh"></i>
<i class="fa fa-cog"></i>

Icon di atas biasa saja, tidak memiliki efek apapun. Akan menjadi lebih menarik bila kita tambahkan efek, misalnya efek fa-spin yaitu efek berputar. Contoh, kita akan menerapkan efek fa-spin untuk icon ini:  fa-spinner, fa-refresh dan fa-cog. Penulisannya sebagai berikut.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Hasilnya.

Tidak hanya itu, Anda dapat memperbesar dan memperkecil icon.

<p><i class="fa fa-thumbs-up fa-lg"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-2x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-3x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-4x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-5x"></i> fa-thumbs-up</p>

dan hasilnya akan menjadi seperti berikut.

fa-thumbs-up
fa-thumbs-up pembesaran 2x
fa-thumbs-up pembesaran 3x
fa-thumbs-up pembesaran 4x
fa-thumbs-up pembesaran 5x

Selamat belajar :)
Daftar lengkap icon dapat Anda lihat di http://fortawesome.github.io/Font-Awesome/icons/