Blog Me Font Awesome Social Media Follow Icon Kaise Add Kare

Internet par aysi koi website or blog nahi hoga. Jis par social media follow button add naho. Its really impossible. Yakinan har ek site par facebook, google plus, twiiter, pinterest, instagram and other koi na koi social icon add hote hai. To chaliye kyu na aap bhi aaj apne blog par font awesome social media follow icon add kar lijiye.

Add Font Awesome Social Follow Icon in your blog

Maine apni pichli post Social Follow Buttan Widget Blogger Me Kaise Add Kare post me bhi blogger me social media foolow button add karne ki jankari di hai. Usme aapko different color ke social follow button ki information milegi.

Is post me mai aapko simple social icon add karne ke bare me bta raha hu. Iska screenshot aa pupar feature image me dekh sakte hai. Yaha mai aapko jo social icon ki coding bta raha hu use aap blogger blog, WordPress blog, joomla and other kisi bhi platform par bane blog ya website me use kar sakte ho. Ye har site par work karega.

Website me social media icon add karke aap apne reader se social sites par bhi contact kar sakte ho or apni new post ko unke sath share kar sakte ho. Isse log aapko socila media par follow karenge or aapko social media sites se quality traffic bhi milega. Iske bare me maine Social Media Sites Se Adhik Traffic Pane Ke Top 5 Clever Ways post me details se btaya hai. Aap ek bar is article ko jarur padhiye.

Font Awesome Kya Hai or Iske Social Icon Kyu Use Karne Chahiye?

Font awesome aapko site par ayse social icon add karne ko deti hai jisme aapko image use karne ki jarurat nahi hoti hai. Fon awesome sirf aapko icon deti hai uske pas CSS pwer nahi hoti hai. So aapko social icon khud design karne hote hai. Aap chahe jaise font awesome social icon ka color, style, size and other setting kar sakte ho. Font awesome icon ko use karne ke kuch fayde aapko yaha bta raha hu.

  1. Fast Loading: Aapne pahle bhi agar apni site par social icon use kiye honge to aapne dekha hoga ki wo icon images ke hote hai or images load hone me jyada time leti hai. Isliye images social icon se site ki loading speed kam ho jati hai. So font awesome social icon iska solution hai. Isme image ki jarurat nahi hoti hai.
  2. Large Connection Icon: Aap font awesome social icon hi nahi balki inke sath or bhi bahut sare icon use kar sakte ho. Isme aapko 100+ icon se bhi jyada icon milenge jaise aapko WordPress ka icon use karna hai to aao fa fa-wordpress use kar sakte ho. Isi tarah aapko jiska bhi icon add karna hai to aap <i><class="fa fa-iconname></i> coding use kar sakte ho.
  3. Custom CSS Support: Font awesome ki sabse achi bat ye hai ki aap iske icon ko chahe jaise design kar sakte ho. Aap uska background, color, style, size sab kuch change kar sakte ho. Bas iske liye aapko CSS coding ki jankari honi chahiye.
  4. Free: Mostly ayse social icon premium hote hai. But aap font awesome icon ko free me use kar sakte ho.

Ab aap jaru apni site par font awesome social icon add karna pasand karoge. So chaliye ab aage bat kartye hai blog me social icon add karne ki.

Blog Me Font Awesome Social Media Follow Icon Kaise Add Karte Hai

Font awesome social icon ko blog me add karna bahut simple hai. Iske aapke pas 2 option hai. First aap apni site ya blog me direct html widget me ye code paste kar sakte hai. Second option me aapko blog ke <head> ke niche code paste karna hoga. Mai yaha aapko second options yani direct widget add karne ke bare me details se bta raha hu. Aapko jo simple lage wo use kar sakte ho.

1. Simple Icon: Default background:

<style>
#smisocialicons {
text-align: left;
}
#smisocialicons a {
color: #font-color;
display: inline-block;
font-size: 16px;
width: 20px;
height: 20px;
line-height: 20px;
margin: 0 1px 6px;
}
</style>
<div id="smisocialicons">
<a href="https://www.facebook.com/JUMEDEENKHAN/" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="https://plus.google.com/+SupportMeIndia/posts" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="https://twitter.com/SupportMeIndiakhan" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="https://in.pinterest.com/jumedeenkhan/" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="https://www.instagram.com/jumedeenkhan/" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="https://www.YouTube.com/user/JUMEDEENKHAN" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a> 
<a href="https://jumedeenkhan.tumblr.com/" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="https://feeds.feedburner.com/supportmeindia" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

2. Awesome Background Social Icon:

<style>
#smisocialicons {
text-align: center;
}
#smisocialicons a {
background: #ae141f;
color: #fff;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 8px;
}
#smiicons a:hover{
background: #hover-color;
}
</style>
<div id="smisocialicons">
<a href="https://www.facebook.com/JUMEDEENKHAN/" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="https://plus.google.com/+SupportMeIndia/posts" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="https://twitter.com/SupportMeIndiakhan" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="https://in.pinterest.com/jumedeenkhan/" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="https://www.instagram.com/jumedeenkhan/" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="https://www.YouTube.com/user/JUMEDEENKHAN" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a> 
<a href="https://jumedeenkhan.tumblr.com/" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="https://feeds.feedburner.com/supportmeindia" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Code ko apne blog me paste karne se pahle usme se meri social id url ki jagah apni social id url add kar le. Maine jo id change karni hai use highlight kiya hai.

WordPress: Agar aap WordPress user hai to ye step follow kare.

WordPress dashboard >> appearance >> widgets >> Select Text >> Choose widget location par ja kar code paste kare.

Blogspot: Or agar aap blogger user hai to ye step follow kare.

Blogger dashboard >> layout >> add a widget >> HTML/Javascript par ja kar code paste kare.

Now, ab aapko ek kaam or karna hai. Upar diye code me se apni social profile ke URL add kare or social icon ka background color change kare. Sath hi height or width code me 30 ki jagah aap apne hisab se size set kar sakte ho.

I hope aapko ye article pasand aayega. So agar aapko ye icon sach me pasand aaye to is post ko social media par share jarur kare. Sath hi apna 2 minute ka time de kar post ke bare me comment me 2 lines jarur likhe.

Avatar for Jumedeen Khan

मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। यहाँ पर मैं नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। ❤️

Comments ( 46 )

  1. Sir whatsup men sent karne ke liye kaise karen
    Disqus comment ke alava koi dusra free comment box btaye jo saral ho

    Reply
  2. Bahut badiya Jankari ha .. it's helpful for my blog thank you dear thank you very much

    Reply
  3. sir meri template pr social media image di hui hai usko kaise change kar sakte hai jo html coding di hui hai document section me weha pr link or apne blog ka name dalne pr bhi image or template name change nahi ho pa rehe hai unko kaise change kar sakte hai

    Reply
    • Blogger template>> edit HTML code par ja kar kar sakte ho. Change karne ke bad page refresh karke check kiya karo.

      Reply
  4. Very nice post

    Reply

Leave a Comment

×