Cara memasang dan menggunakan icon font awesome

villaralcaldeblog |

Cara lengkap menggunakan icon font awesome pada blogger mudah. Secara singkat dikala kita menggunakan icon font awesome kita memakai icon menarik tanpa perlu upload icon yang akan memperlambat blog kita. Icon ini berbasis vector dan kita dapat memaksimalkannya dengan banyak sekali tampilan. Dibawah ini merupakan cara menggunakan icon font awesome di HTML blog.

Apa itu icon font awesome?

Icon font awesome adalah jenis font yang berbentuk gambar atau icon yang digunakan untuk mempercatik  tampilan blog atau website. Font awesome memiliki banyak versi , sudah ada yang lama dan yang baru. Bedanya , yang baru lebih didesign menarik dari pada yang lama.

➧ Cara menggunakan icon font awesome di platform blogger

#1. Pertama simpan link styleshet dibawah ini di atas </head>

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

#2. Kamu mampu menggunakan icon font awesome ini dimana saja , untuk menggunakannya menggunakan tag <i> dalam penggunaannya di HTML. Kemudian kita menggunakan class nya yaitu (fa) untuk memanggil icon yang diinginkan.

Daftar icon disini : http://fontawesome.io/icons/

Contoh , memanggil icon home :

<i class="fa fa-home"></i>

Maka akan terlihat mirip ini :

 fa-home

Tidak usah hawatir , icon ini kadang tidak akan muncul di compose blog anda. Anda perlu mempratinjau dulu untuk melihat hasilnya.

 Cara mengatur ukuran icon font awesome

Kamu mampu menggunakan tambahan 

• fa-lg
• fa-2x
• fa-3x
• fa-4x
• fa-5x

<i class="fa fa-home fa-lg"></i>  ditambah : fa-lg
<i class="fa fa-home fa-2x"></i> ditambah fa-2x
<i class="fa fa-home fa-3x"></i> ditambah fa-3x
<i class="fa fa-home fa-4x"></i> ditambah fa-4x
<i class="fa fa-home fa-5x"></i> ditambah fa-5x

maka akan terlihat mirip ini mirip ini :

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

Cara mengatur warna , ukuran dan style

Cara mengatur warna , ukuran dan style icon awesome anda dapat menggunakan class css yang sesuai. contohnya :

<i class="fa fa-comment-o fa-4x"></i>
<style>
.fa-comments-o {padding:0;  margin:0; float:left;padding:5px 0px; color:#F2784B;}
}
</style>

➧ Ganti goresan pena berwarna merah dengan instruksi dibawah

Kamu mampu mencari icon yang kau inginkan di sini : http://fontawesome.io/icons/

➧ Ganti goresan pena biru caranya mampu anda temukan dipostingan ini

Kamu mampu mencari icon yang kau inginkan di sini : Cara mengetahui instruksi dan warna html mudah

maka akan menjadi mirip ini

***

Selamat mencoba