image3

welcome to my blog|hope be useful

Cara Menggunakan Font Awesome pada Blogger


Hai Blogger! Berikut adalah Cara untuk Menggunakan Font Awesome pada Blogger :



Pertama anda perlu menambahkan dulu Kode File CSS milik Font Awesome pada Template Anda agar Font Awesome bisa tampil pada Blog.

  • Buka Menu Themes, kemudian klik Edit HTML.
  • Tambahkan Kode File CSS Font Awesome ini dibawah Kode <head>
  • Untuk memudahkan pencarian tekan Crtl dan F, ketik <head> dan tekan Enter.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

  • Simpan Perubahan Template dan Selanjutnya Gunakan Kode ini Menampilkan Font Awesome :

<i class="fa fa-kode font awesome"></i>

  • Ganti Bagian Kode Font Awesome dengan Ikon yang ingin Ditampilkan. untuk Daftar atau List  Kode Ikon Font Awesome silahkan langsung lihat pada situs Resmi Font Awesome DISINI atau pada situs W3Scholl DISINI

  • Contoh :
 
<span><i class="fa fa-user"></i> <i class="fa fa-coffee"></i> <i class="fa fa-comments"></i> </span>

  • Maka Hasilnya :



  • Untuk Menerapkan Style pada Ikon Font Awesome, lakukan Pengkodean seperti ini :
 
<span><i style="margin-right:10px; font-size:30px; color:#ff6347;" class="fa fa-user"></i> <i style="margin-right:10px; font-size:25px; color:#b1db5c;" class="fa fa-coffee"></i> <i style="margin-right:10px; font-size:20px; color:#54c0e8;" class="fa fa-comments"></i></span>

  • Hasil Style Menjadi :



  • Fungsi dari perintah margin-right:10px; adalah untuk memberikan jarak kekanan sebanyak 10px, silahkan ganti 10px dengan jarak yang diinginkan.
  • Fungsi dari perintah font-size:30px; adalah untuk mengatur besar ikon menjadi 30px, silahkan ganti 30px dengan ukuran yang diinginkan.
  • dan Fungsi dari perintah color:#ff6347; adalah untuk mengatur warna ikon menjadi warna merah (#ff6347) silahkan ganti dengan kode warna yang diinginkan. Kode Warna bisa lihat DISINI

Apabila Ikon Font Awesome tidak mau tampil, coba cek Versi File CSS Font Awesome yang terbaru DISINI (Versi yang saya bagikan diatas adalah Versi 4.3.0)

Semoga Bermanfaat, Happy Blogging :) 

TAGS : Blogger CSS HTML

Share :

Blog ini tidak menyediakan URL / Link Download segala jenis Konten yang Bersifat Ilegal, seperti Crack, Patch, Serial Number, dan Sejenisnya.

PROFIT KONSISTEN DENGAN ROBOT TERBAIK :

FREE Trial Forex EA Trader
Forex Trend Detector
Dynamic Pro Scalper
Forex Diamond EA - Robot Forex Terbaik
WallStreet Forex Robot 2.0 Evolution
Volatility Factor 2.0

CONVERSATION