How To Add Font Awesome Icon to WordPress Sidebar Using CSS

Font Awesome Icon to WordPress Sidebar | हेल्लो दोस्तों आपका स्वागत है Infinityज्ञान ब्लॉग मै, मेरा नाम भरत है! आज मैआपको सिखाऊंगा की किस तरह से आप WordPress वेबसाइट के साइडबार मै Font Awesome के Icon लगा सकते है.

सभी ब्लॉगर हमेशा यही साहते है की मेरा ब्लॉग सबसे अलग दिखे, और अगर आपके ब्लॉग का लेआउट सबसे अलग होगा तो जो एकबार विजिटर आता है वो दूसरी बार जरुर आता है अगर आपके साईट का लेआउट यूजर फ्रिन्द्ली होगा.

मै काफी टाइम ब्लॉग्गिंग कर रहा हु और हमेशा मै मेरे सभी ब्लॉग का डिजाईन सबसे अलग रखने की कोसिस करता हु, आप मेरे दुसरे ब्लॉग को विजिट करके देख सकते है जैसे की Bloggingguidance.

Add Font Awesome Icon to WordPress Sidebar Using CSS

आज मै आपको CSS की मदद से कैसे आप अपने WordPress वेबसाइट के साइडबार मै Font Awesome Icon लगा सकते है वो सिखाऊंगा तो सिंपल आप नीचे के स्टेप फोल्लो कीजिये.

Step #01

सबसे पहले आपको Font Awesome Icon का Integration करना होगा आपके वेबसाइट मै, आप दो तारीखे से कर सकते है CDN से और Plugin से, आज मै आपको plugin से सिखाऊंगा तो सिंपल आपको एक plugin डालना है आपकी वेबसाइट मै इसका नाम है Font Awesome 4 Menus.

Step #02

अब आपको सिंपल जो मैंने आपको नीचे कोड दिया है CSS का वो कोड आपको यहाँ से कॉपी करना है और आपको आपके WordPress वेबसाइट मै लॉग इन करके Appearance > Customize > Additional CSS मै जेक पेस्ट करदेना है.

Note: अगर आपने आपकी साईट मै Font Awesome Icon का Integration नहीं किया होगा तो यह Icon शो नहीं होगे.

.widget ul {
  list-style: none;
  padding: 0;
	color:#002468;
}

.widget li {
  padding-left: 1.3em;
	font-weight: bold;
	font-size:18px;
}

.widget li:before {
	font-size:16px;
  content: "\f138";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
}

Icon & Color कैसे बदले!

अगर आपको इसके icon बदल ने है तो आपको इसका यूनिकोड बदल ना होगा , Font Awesome बहुत सरे icon है तो अगर आपको सबके यूनिकोड जानने है तो यह वेबसाइट को Font Awesome Cheatsheet विजिट करके जन सकते है.

अगर आपको icon का color बदल ना है तो आपको ऊपर के कोड मै बदलाब करना होगा color:#002468; की जगह color:#your-color-code; आपको आपना कोड डालना होगा जो color आपको पसंद है.

Final Word

तो दोस्तों मै आशा रखता हुकी आपको यह जानकारी पसंद आयी होगी, अगर आपको पसंद आई और आपको लगता है की हेल्पफुल है तो सोशल मीडिया मै एस पोस्ट को शेयर जरुर करना.

अगर आपको ब्लॉग्गिंग सीखना है तो हमारा एक ब्लॉग है Bloggingguidance, यह ब्लॉग मै हम आपको Blogging, SEO, ब्लॉग पर ट्राफिक कैसे लाये इसके बारे मै सिखाते है तो विजिट जरुर करना.

आप हमे सोशल मीडिया पर भी फोल्लो कर सकते है! Facebook, Instagram और हा हमरा एक YouTube चैनल है BM Tech Tips इसको आप सब्सक्राइब करना मत भूलना.

54 thoughts on “How To Add Font Awesome Icon to WordPress Sidebar Using CSS”

    • Social media icon plugin se add kiye hai ,mai jaldhi eska ek article likhunga ,or BloggingGuidance mai jo table of content hai wo block editor ka matlab ek plugin hai ultimate block eska hai

      Reply
  1. Vai mai tumhre YouTube channel ka bohot purana subscriber hu. Mujhe Generatepress (free) customize ke ware video chahiye. Jis tarah se tum iss website, 2sra jo hostingmirror se migrate karke laye ho uss type ki design chahiye. Specially mobile jyasa Navigation Menu hai waysa .
    Please vai bata do.

    Reply
  2. Mera what’s app number hain-+919922111176 sirji main maharashtra se hun…maine apko bahot sare emails instagram bhi kya hain apko call bhi kar raha hun sirji…but aap shyad kaam main ho please sir ek baar call kardo main bahot pareshan hun sir. jobless hun aur nokri bhi nahin hain muze apke sirf 5min chahiye sirji sirf 5min . please sirji ek baar sirf ek baar baat karo sirji please main pichle ek saale se apko contact karne ki koshish kar raha hun sirji please ek baar call karo

    Reply
  3. Bhai sidebar me different heading ki category ke add kare jese me for Example State wise news category, country wise news, Latest News. Jesi alag alag category kese add karte hai btao please.

    Reply
  4. Bhai sidebar me different heading ki category kese add kare jese for Example State wise news category, country wise news, Latest News. Jesi alag alag category kese add karte hai btao please.

    Reply
  5. Hello Bhai Maine wordpress pe blog bnaya h lekin YouTube se traffic la rha tha so adsense me invalid traffic source ka mail aa gya jabki Google se traffic nhi aa rha main kya kru please help

    Reply
  6. Hi, My Name is Nilesh Makwana and I am from Palitana (Bhavnagar)
    Me aapse milna chahta hu or ek interview Lena chahta hu… Meri youtube channel k liye.. Agar aap interesting ho to jarur batana (makawananilesh8@gmail.com)

    Reply
  7. I have added the css code and font awosome icons are shown on Recent Posts, Category and also on Footer Bar. It improved my site design.

    But I don’t want to show the icons on my footer bar.

    How can I do that?

    Please help and reply…

    Thanks in advance.

    Reply

Leave a Comment

0 Shares
Copy link
Powered by Social Snap