Penggunaan Font Awesome di Blog

Berbagai macam Cara untuk menambahkan Font Awesome di blog banyak diterangkan oleh para blogger, dengan berbagai maca cara serta berbagai macam icon font awesome di dunia maya, tinggal saudara bertanya kepada mbah google semua akan terjawab, oleh sebab itu para pembaca dalam hal ini saya mengupasnya secara sederhana dan mudah dipraktekan pada blog, oleh karena itu ikutilah langkah berikut ini, walaupan saudara udah tahu mungkin, tap apa salahnya kalau anda mencoba yang satu ini, mungkin ada yang lebih di sini

• 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

 <li><a class='\f0ec' href='http://sanggar-belajar.blogspot.com/p/tukar-link.html'><i class='icon-exchange'/> Tukar Link</a></li>

• 5Penggunaan 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

Tweet

Ditulis Oleh: wisata pisak at 2:00 PM