Berbagai macam Cara untuk menambahkan Font Awesome di blog

Berbagai macam Cara untuk menambahkan Font Awesome di blog banyak diterangkan oleh para blogger hanya saya mengupasnya secara sederhana dan mudah dipraktekan pada blog, oleh karena itu ikutilah langkah berikut ini

• Login Ke Blogger Anda
• Edit HTML
• Untuk bisa menggunakan Font Awesome ini, sobat harus menyimpan CSSnya di atas </Head>
  
  
link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
• Penggunaanya Pada Menu Navigasi
  
  link hre<li><a class='\f0ec' href='http://sanggar-belajar.blogspot.com/p/tukar-link.html'><i class='icon-exchange'/> Tukar Link</a></li>
  
  
• Penggunaan Pada Sidebar
  
  .sidebar h2:before { content: "\f02c"; font-family: fontAwesome; font-size: 11px; font-style: normal; background: none repeat scroll 0% 0% #35404D; color: #BF5F5F; top: 0px; left: 0px; padding: 25px; position: absolute; text-shadow:1px 0px 1px #000000; } .sidebar h2:before { font-size: 11px; font-style: normal; background: none repeat scroll 0% 0% #35404D; color: #BF5F5F; top: 0px; left: 0px; padding: 9px; position: absolute; text-shadow:1px 0px 1px #000000; } element { }
  
  
• Perhatikan Yang Berwarna Merah dan Kuning Untuk disesuaikan content yang ada pada Template blog saudara
• Cara Penulisannya Untuk menggunakan Font Awesome, sobat harus menambahkan tag <i> kemudian class nya gunakan nama icon. atau
  
  

  <i class="icon-qrcode"></i>

   
  

  <i class="icon-edit-sign"></i>

  
  
• Untuk Membesarkan  Icon
  
  

  <i class="icon-tag"></i>
  <i class="icon-tag icon-large"></i>
  <i class="icon-tag icon-2x"></i>
  <i class="icon-tag icon-3x"></i>
  <i class="icon-tag icon-4x"></i>

• Hasilnya
  

• Contoh Beberapa Penulisan
  
  <span class="icon-stack"> <i class="icon-check-empty icon-stack-base"></i><i class="icon-twitter"></i></span><span style="margin-left: 8px;">icon-twitter di atas icon-check-empty </span> <span class="icon-stack"> <i class="icon-circle icon-stack-base"></i><i class="icon-flag icon-light"></i></span><span style="margin-left: 8px;">icon-flag di atas icon-circle </span>
  
• icon-twitter di atas icon-check-empty icon-flag di atas icon-circle