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

• Add Font Awesome Icon to WordPress Sidebar Using CSS
  • Step #01
  • Step #02
• Icon & Color कैसे बदले!
• Final Word

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 इसको आप सब्सक्राइब करना मत भूलना

[responsivevoice_button]

Today’s Deal