BloggingHindi - Blogging Aur Internet Ki Sabhi Jankari

  • About Us
  • Contact Us
  • Blogging
  • WordPress
  • SEO

Blog Me Font Awesome Icons Ko Use & Design Kaise Kare 

Last Updated on January 5, 2021 by Md Arshad Noor 2 Comments

Content Summary

  • Font Awesome क्या है?
  • Font Awesome को अपने ब्लॉग में Host कैसे करें?
  • Font Awesome को ब्लॉग में कैसे Use करें?
  • Font Awesome Icons का Color और size कैसे Change करें.
        • Change Color Of Icon.
        • Change Font Awesome Icon Size

ब्लॉग को अच्छे से design करने के लिए उसमे icons use करना बहुत जरुरी होता है. हम icons की मदद से अपने ब्लॉग की look को और भी better बना सकते हैं. Icons कई types के होते है और सभी का file different होता है. हम आज इस post में आपको Font Awesome icon के बारे में बताने वाले हैं. इसको कैसे अपने ब्लॉग में host करें और इसे use कैसे किया जाता है. अगर आप भी अपने ब्लॉग में font awesome की icons add करना चाहते हो तो यह article आपके लिए ही है. इसे ध्यान से पढ़े आपको इसके बारे में सभी जानकारी मिल जायेगी.


लगभग सभी popular blogger अपने ब्लॉग में icons को use करते हैं. इससे उसके ब्लॉग की design तो अच्छी होती ही है और इससे उसके visitors किसी post को अच्छे से समझ पाते है. बहुत सारे popular brands और widgets के लोगो के icons बने होते हैं. जिससे लोग अपने ब्लॉग में use करते है. Icons बहुत से file में होते हैं. जैसे PNG, svg etc. File में होते हैं. हम इस post में आपको Font Awesome Icons के बारे में बताने वाले है.

Font awesome एक icons की pack है. यह other सभी icons file से better है और यह सबसे fast loading होने वाली icon file है. इससे आप free में अपने website, app, theme etc. को design कर सकते हो. लगभग सभी website designer, app developer, theme developer इसको use करते हैं. अगर आप चाहो तो इसकी मदद से Social Sharing buttons को easily design कर सकते हो, अपने से Social Follow buttons बना सकते हो लेकिन इसके लिए आपको HTML की जानकारी होनी चाहिए. इसको ब्लॉग में use करना बहुत ही simple है.

इसको use करने के लिए आपको font awesome की file को अपने site में host करना होगा. इसको अपने site में host करने के लिए बहुत सारे तरीके हैं. हम अगले post में आपको इसको host करने के लिए अलग अलग तरीके के बारे में बताएँगे लेकिन फिलहाल हम इस post में Font awesome को host करने के लिए एक तरीके के बारे में बताएँगे. जिससे आप आसानी से font awesome को अपने ब्लॉग में host करके use कर पाओगे।

Font Awesome क्या है?

जिस तरह में आपको ऊपर में भी बताया है तो आपको इसके बारे में थोड़ा बहुत जानकारी मिल गया होगा. अगर आप नही जानते हो तो में आपको बता देता हूँ की Font awesome icons की file है. जिससे हम अपने ब्लॉग में icons को add करके उसे design कर सकते हैं.
वैसे icons की कई others file भी हैं लेकिन सबसे better और fast loading यही है. इसीलिए लगभग सभी popular ब्लॉगर अपने ब्लॉग में इसी को use करते है. अगर आप चाहो तो इसको अपने ब्लॉग में आसानी से use कर सकते हो लेकिन आपको इसके लिए अपने site में font awesome को host करना होगा. इसके लिए हम निचे बता रहे हैं।

Font Awesome को अपने ब्लॉग में Host कैसे करें?

इसको अपने ब्लॉग में host करना बहुत ही आसानी है. हम आपको निचे में MaxCDN से host करने के बारे में बता रहे हैं. क्योकि यह सबसे better CDN Provider है तो चलिए जानते हैं की Font Awesome को ब्लॉग में कैसे Host करें।

Step 1: सबसे पहले Blogger में Login करके अपने Blog Dashboard में जाएँ।

Step 2: अब Theme ->Edit HTML में जाएँ और CTRL+F की मदद से </head> को search करें.

Step 3: </head> मिल जाने पर </head>  के पहले आपको निचे दिए हुए code को add करना है और Save कर देना है.

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

अब Font Awesome आपके ब्लॉग में Host हो गया है. अब आप आसानी से अपने ब्लॉग में Font Awesome को use कर सकते हो. आपके ब्लॉग में 600+ Icons host हो चुकी है. अब आप इसे आसानी से customize और design कर सकते हो. चलिए अब हम जानते हैं की Font Awesome को ब्लॉग में कैसे use करें?

Font Awesome को ब्लॉग में कैसे Use करें?

अब आपने अपने ब्लॉग में Font Awesome icons को host कर लिया है. अगर नही किये हो तो host कर लीजिए. क्योकि बिना Host किये आप ब्लॉग में Font Awesome की icons को use नही कर सकते हो.

Font Awesome को use करने के लिए सभी icons का अलग अलग fa fa HTML code होता है, जिसे हमें अपने ब्लॉग में या ब्लॉग की post में add करना होता है. तभी font awesome की icon show होता है.

जैसे की हमे अपने ब्लॉग की post में Facebook का icon add करना है तो इसका html code <i class=”fa fa- facebook “></i> है. तो इस code को हमे अपने ब्लॉग post की HTML टैब में add करना होगा तभी हमारे post में facebook की icon show होगी।

अगर आप यह सोच रहे हो की हम किसी Icon का html code कैसे पता करे तो इसके लिए आप यहाँ पर Visit करके Icons की HTML code देख सकते हो. जब आप इस site में visit करोगे तो वहां बहुत सारे icons होंगे. आपको जिस icon का HTML code जानना है, उसपर click करें.

Font Awesome Icons का Color और size कैसे Change करें.

Change Color Of Icon.

आप font awesome की icons का color भी change कर सकते हो. इसके लिए बहुत ही simple है. में आपको example देकर समझाता हूँ. जैसे की Heart की html code यह है.

Example: <i class=’fa fa-heart ‘/></i>

तो हमे इसका color change करने के लिए style=’color:red ‘;आप red के स्थान पर अपने हिसाब से blue, white, black, purple, yellow, green, etc. कोई color name देकर set कर सकते हो. इसको add करने के बाद इस तरह हो जायेगा.

Example:  <i class=’fa fa-heart ‘ style=’color:red;’/></i>

Change Font Awesome Icon Size

आप Font Awesome की Icon की size को अपने हिसाब से रख सकते हो. इसके लिए आपको एक simple code add करना होगा. चलिए details में बताते हैं की जैसे Heart की Icon की html code normally कुछ इस तरह होगा.

Example: <i class=’fa fa-heart’/></i>

तो हमे इस icon की size को बदलने के लिए style=”font-size:20px;” (आप 20px के स्थान पर अपने हिसाब से size set कर सकते हो) को add करना होगा. इसको add करने के बाद कुछ इस तरह icon का html code होगा.

Example: <i class=’fa fa-heart’ style=’font-size:20px;‘/></i>



Conclusion,
इस तरह से आप अपने ब्लॉग में font awesome को use कर सकते हो. आप Font Awesome की icons को CSS code की मदद से अपने हिसाब से design भी कर सकते हो. यह बहुत अच्छा तरीका है ब्लॉग को और भी ज्यादा attractive look देने के लिए. अभी के time में इससे ज्यादा fast loading कोई और font नही है और यह अभी सभी professional blogger का favorite है. हम आने वाले time में इससे related और भी जानकारी देंगे.


में उम्मीद करता हूँ की आपको यह post अच्छा लगा होगा और आपने इस post की मदद से यह जान लिया होगा की ब्लॉग में Font Awesome को Host कैसे करते है और इसे ब्लॉग में Use और Design कैसे करते हैं. अगर आपको इस post से सम्बंधित कोई सावल पूछना है तो comment करें. इस post को social media में share करें।

You May Also Like

  • Apke Blog Me 6 Chije Jo Visitors Ko Hurt Karte Hai

    Apke Blog Me 6 Chije Jo Visitors Ko Hurt Karte Hai

  • Chrome Browser Ke Liye Top 10 Free SEO Extension [For Every Blogger]

    Chrome Browser Ke Liye Top 10 Free SEO Extension [For Every Blogger]

  • Blogger Template ko Zip File Se xml File me Convert kaise Kare – Mobile ya Computer se

    Blogger Template ko Zip File Se xml File me Convert kaise Kare – Mobile ya Computer se

  • Guest Post Se Adhik Fayda Uthane Ke Liye 8 Tips

    Guest Post Se Adhik Fayda Uthane Ke Liye 8 Tips

About Md Arshad Noor

हेलो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में इस ब्लॉग में रेगुलर नई नई आर्टिकल्स लिखता हूँ. यहाँ पर हम ज्यादातर Blogging, Make Money, SEO, WordPress आदि से सम्बंधित Article मिलेगी. आपको हमारी लेख पसंद आती है तो इसे सोशल मीडिया में शेयर करें। अगर आपको कोई सहायता चाहिए तो कमेंट कीजिए।

COMMENTs ( 2 )

  1. Utpal Konwar says

    aap apne topic ke last end me subcribe newslater box add kiya hai wo kaise kare?

    Reply
    • Md Arshad Noor says

      Hi Utpal,
      Ye Subscription box HTML and CSS se banaya gya hai.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please do not spam! otherwise your comment will be removed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get it on Google Play

Useful Articles

Khush Nahi Rahne Wale Logo Ki 5 Buri Aadte

Revenue Hits kya hai aur isme Account kaise banaye

Blogspot Blog me Country Specific Redirect Disable kaise Kare

Spam Mail Sender Se Unsubscribe Karke Spam Mail Se Kaise Bache

Google Me Search Karne Ke Top 10 Tips & Trick – [Get Right Results Fast]

Google Search Results Me Blog Ke Sabhi Posts Me Star Rating Kaise Dikhaye

Blog Homepage Me Only Post Title Kaise Dikhaye

Blogging me fail hone ka 10 sabse Bada Karan

Social Media se More Traffic Pane ke Liye 10 Important Tips

Quora Se Blog Ki Traffic Kaise Badhaye? 5 Tips

Blog Post me Keyboard key kaise lagaye

YouTube Se PR9 Dofollow Backlink Kaise Receive Kare

Blog Post Copy Hone Par Copyright Post Me Automatic Apne Blog Ki Link Add Kare

About Us

mdarshadnoorहेल्लो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में अररिया, बिहार का रहने वाला हूँ. मुझे नयी चीजें सीखना-सिखाना बहुत पसंद है. में पिछले 5 सालों से ब्लॉगिंग के फील्ड में हूँ. इस ब्लॉग में आपको ब्लॉगिंग और इन्टरनेट से सम्बन्धित जानकारी मिलेगी.

SUBSCRIBE OUR NEWSLATTER

हमारे ब्लॉग के रेगुलर विजिटर हो तो अभी Subscribe कर लीजिए ताकि आप हमारे नए पोस्ट को सबसे पहले पढ़ पाएँ!

Posts for WP Users:

WordPress Blog Ki Loading Speed Ko htaccess Se Fast Kaise Banaye

Blog Post Copy Hone Par Copyright Post Me Automatic Apne Blog Ki Link Add Kare

WordPress Me Emoji Ko Load Hone Se Disable Kaise Kare

Hostlelo Review – A Great Solution for New Bloggers

WordPress Me Ads Dikhane Ke Liye Ad Injection Setup Kaise Kare

More Posts from this Category

Recommended For You

WordPress.com Serious Blogger Ke Liye Bekar Kyu Hai? 8 Reasons

SEM kya hai? iski puri jankari

Blog Ko Aur Bhi Jyada SEO Friendly Banane Ke Liye 7 Tips

Blog Ki Loading Speed Mayne (Matter) Kyu Rakhta Hai [5 Karan]

Adsense Payment Direct Bank Account Me Receive Karna Enable Kaise Kare [Setup Payment Method]

Successful Blogger 5 Tariko Se INCOME Karte Hai

Google Me Blog Ki New Post Index Notification Email Me Kaise Paye

Blogspot Blog Me Social Media Share Button Kaise Lagaye?

Teachers Day Speech in Hindi – शिक्षक दिवस पर हिंदी भाषण

Copyright © 2020 - All rights reserved.AboutContactSitemapDisclaimer