Cara memasang Font Awesome pada Blog

Apa itu Font Awesome?

Masih banyak blogger pemula yang belom tau apa itu Font Awesome. Font Awesome yaitu Icon yang dipasang di website atau blog menggunakan kode CSS. Kebanyakan icon-icon yang kita lihat di sebuah website atau blog, mereka menggunakan icon dari font awesome, sehingga load sebuah halaman lebih ringan di bandingkan jika menggunakan icon dari bitmap, jpg, png. Kalian dapat memasang Icon Font Awesome dimana saja dengan di awalai kode . Kode  merupakan simbol dari Icon.

Mulai memasang Icon Font Awesome

Sebelum memulai memasang Icon Font Awesome, taruh kode CSS berikut di atas kode </body> pada template blog kalian. Dengan memanfaatkan fitur CDN untuk menggunakan icon Font Awesome tanpa hosting.


<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Untuk mendapatkan koleksi Icon-icon gratis dari Font Awesome, kalian bisa melihat nya disini. Pilih sesuai selera untuk di pasang di web blog kalian.

Contoh-contoh penerapan Icon Font Awesome

Icon Dasar

"fa-google-plus" ini merupakan kode dari Icon Google Plus. Untuk memasangnya lihat kode berikut:

Font Awesome dirancang untuk membuat icon sebaris.

Ukuran Icon Font Awesome

Untuk memasang icon font awesome, kita dapat menyetel ukurannya sesuai kebutuhan dengan menambahkan kode fa-2x, fa-3x dan selanjutnya. Lihat Code di bawah:

Ukuran Normal	<i class="fa fa-google-plus" aria-hidden="true"></i>
33% lebih besar	<i class="fa fa-google-plus fa-lg " aria-hidden="true"></i>
2x lebih besar	<i class="fa fa-google-plus fa-2x " aria-hidden="true"></i>
3x lebih besar	<i class="fa fa-google-plus fa-3x" aria-hidden="true"></i>
4x lebih besar	<i class="fa fa-google-plus fa-4x" aria-hidden="true"></i>
5x lebih besar	<i class="fa fa-google-plus fa-5x" aria-hidden="true"></i>

Fixed Width Icons

Gunakan kode fa-fw untuk mengatur lebar icon dengan text agar rapi.

Home	<a href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>

Library
<a href="#"> Library</a>
Applications
<a href="#"> Applications</a>
Settings
<a href="#"> Settings</a>

Icon berputar atau Animasi

Untuk membuat ikon berputar cukup dengan menambahkan "fa-spin". Ikon yang dapat berputar diantaranya fa-spinner, fa-refresh, fa-circle-o-notch dan fa-cog. Gunakan class "fa-pulse" untuk membuat putaran 8 langkah.

	<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
	<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
	<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
	<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
	<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

Ikon berputar arah

Ikon Font Awesome juga dapat di putar lho atau di pindah arah nya, misalnya mendatar (kanan atau kiri), dan ke bawah. Hanya dengan menambahkan class "fa-rotate-*" dan atau "fa-flip".

normal	<i class="fa fa-shield"></i>
fa-rotate-90	<i class="fa fa-shield fa-rotate-90"></i>
fa-rotate-180	<i class="fa fa-shield fa-rotate-180"></i>
fa-rotate-270	<i class="fa fa-shield fa-rotate-270"></i>
fa-flip-horizontal	<i class="fa fa-shield fa-flip-horizontal"></i>
fa-flip-vertical	<i class="fa fa-shield fa-flip-vertical"></i>

Ikon bertumpuk

Kita juga bisa menggabungkan 2 ikon font awesome untuk mendapatkan jenis ikon baru.
Untuk menggabungkan 2 ikon, gunakan class "fa-stack". "fa-stack-1x" digunakan untuk ukuran ikon standar, sedangkan "fa-stack-2x" untuk ukuran ikon yang lebih besar.

fa-twitter dan fa-square-o

<span class="fa-stack fa-lg">
 <i class="fa fa-square-o fa-stack-2x"></i>
 <i class="fa fa-twitter fa-stack-1x"></i>
</span>

fa-ban dan fa-taxi


<span class="fa-stack fa-lg">
 <i class="fa fa-ban fa-stack-2x"></i>
 <i class="fa fa-taxi fa-stack-1x"></i>
</span>

Bootstrap

Tombol bootstrap juga bisa menggunakan icon font awesome. Tetapi membuat tombol bootstrap ini memerlukan kode CSS tambahan, diantarnya bisa di lihat di Artikel Cara membuat Tombol Download pada Blog

Settings


<a class="tombol" href="#"><i class="fa fa-cog"></i> Settings</a>

Demikianlah beberapa cara memasang Icon Font Awesome pada blog kita agar terlihat lebih menarik dan profesional. Semoga tutorial ini berguna bagi kalian. Dan bila ada pertanyaan seputar pemasangan Icon Font Awesome ini, bisa di utarakan lewat kolom komentar di bawah, sebisa mungkin akan saya jawab.

Social Widget

Menu

Cara memasang Font Awesome pada Blog