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

Komentar

Posting Komentar

Postingan populer dari blog ini

Istilah-istilah blog

-
Gambar
villaralcaldeblog | Ada banyak istilah-istilah di dalam dunia blog yang kita mungkin belum tau. Kamtree.com mungkin akan sedikit membantu menjelaskan perihal istilah tersebut!. Daftar isi (click or ctrl+f) A 1. Afiliasi 2. Adsense B 1. Blog 2. Blogger 3. Blogging 4. Blogger 5. Blogwalking M 1. Monetisasi blog P 1. Platform S 1. SEO ➤ A 1. Afiliasi Bentuk kerja sama yang kita jalin dengan perusahaan atau lembaga pemilik produk ( Affiliate merchant ) untuk memasarkan produk mereka dan sebagai pemasar produk ( Affiliate marketers ) kita akan dibayar setelah ada produk terjual. 2. Adsense Merupakan acara kerja sama periklanan melalui media internet yang diselenggarakan Google. Pemilik situs web atau blog yang telah mendaftar dan disetujui keanggotaannya diperbolehkan memasang unit iklan yang bentuk dan materinya telah ditentukan oleh google di halaman web mereka. ➤ B 1. Blog Blog ialah website langsung (pe...
Baca selengkapnya

Menentukan Topik dan Jenis niche blog

-
Gambar
villaralcaldeblog | Sebelum membuat blog ada kalanya kita melaksanakan persiapan dulu. Pertama cari topik blog. Pengen nulis apa?. Baru memutuskan judul atau nama blog dan baru memilih platform yang mana. Beberapa yang harus dipersiapkan sebelum membuat blog atau persiapan sebelum membuat blog. Daftar isi (click) A. Tentukan Niche blog atau life style blog? B. Tentukan Topik blog C. Saran mau buat blog apa? ➧ Tentukan Niche blog Di dunia blogging setidaknya ada 3 jenis blog. Personal blog , blog yang ditulis perseorangan dan atas nama pribadi. Tentunya artikel-artikelnya berdasarkan opini pribadi. Corporate blog , blog yang dipergunakan untuk kepentingan perusahaan. Community blog , dipergunakan untuk komunitas untuk berbagi campaigne yang mereka usung dan sekadar liputan acara komunitas tersebut. Yang kita akan bahas hanya Personal Blog .  Ada 2 kategori besar blog , Lifestyle blog Niche blog  Apa itu niche ? Niche ...
Baca selengkapnya

Panduan lengkap cara membuat blog di blogger

-
Gambar
villaralcaldeblog | Kenapa kita nge blog? Kenapa kita nge-blog? Apa manfaat nge blog? 1. Hobi menulis Hobi kita dari dulu emang suka menulis. Biasanya ditandai dengan; senang menulis cerita , diary , menyebarkan , bahkan menulis status facebook. 2. Mengisi waktu luang dengan hal yang bermanfaat Waktu luang kita banyak yang terbuang hanya untuk bermain game , tidur , dan makan. Kenapa tidak kita nge-blog dan menghasilkan uang dari blog. 3. Sarana belajar (web design , menjadi penulis jago dll) Kita memang ingin mendalami ilmu web design , ingin menciptakan facebook kedua atau kita emang pingin menjadi seorang penulis yang hebat. 4. Eksistensi Kita memang ingin eksis dengan blog kita jikalau tampil pertama di google. 5. Sarana berinteraksi dengan blogger lain (networking) Blogging juga merupakan sarana berinteraksi dengan blogger lain. Mulai dari menanyakan tips , menyebarkan tips hingga saling follow dan comment blog. 6. Dapat uang...
Baca selengkapnya