कैसे plugins के बिना WordPress में सामाजिक मीडिया माउस को जोड़ने के लिए

बिना प्लगइन के अपने वर्डप्रेस साइट पर सोशल मीडिया आइकन जोड़ना चाहते हैं?

पोस्ट के एक टन हैं जो दिखाते हैं कि फॉन्ट भयानक का उपयोग करके आइकन कैसे जोड़ें, लेकिन मैं आपको अपने बाहरी आइकन को जोड़ने के बिना बहुत सरल तरीका दिखाऊंगा।

यदि आप कोई ऐसा व्यक्ति है जो पृष्ठ गति को गंभीरता से लेता है, तो आपको यह पसंद आएगा।

Dashicons is the official WordPress icon font. They appear in the left sidebar of every WordPress site admin backend.

We will use these icons instead of external icons. This will free up the browser from requesting additional files.

बस इन चरणों का पालन करें:

चरण 1

साइडबार या पाद लेख में कस्टम HTML विजेट जोड़ें। आप डैशबोर्ड >>> सूरत >>> विजेट के तहत विजेट का प्रबंधन कर सकते हैं।

चरण 2

इस कोड को कंटेंट बॉक्स में पेस्ट करें

In this code, we display the Facebook and Twitter icons only.
To add more icons, you will need to customize three parts in it.

href is the link to you social page
aria-label is text that describes the link

तीसरा और सबसे महत्वपूर्ण एक वर्ग है = "डैशिकन्स डैशिकन्स-फेसबुक-एश"

डैशिकों में प्रत्येक फ़ॉन्ट में एक विशिष्ट वर्ग होता है जिसका उपयोग आइकन प्रदर्शित करने के लिए किया जाता है। हम उस पर क्लिक करके एक आइकन वर्ग पा सकते हैं

इस भाग को उस स्थान से बदलें जिसे आप उपयोग करना चाहते हैं

उदाहरण के लिए, डैशिकंस-फेसबुक-एएलटी को बदलें दिल दहलाने वाला और दिल आइकन प्रदर्शित किया जाएगा।

चरण 3।

इस CSS को अपने चाइल्ड थीम Style.css फ़ाइल में या आप Customizer अतिरिक्त CSS विकल्प में जोड़ें

.सोशल-लिंक-कंटेनर {डिस्प्ले: फ्लेक्स; }। सोशल-लिंक-कंटेनर। सोशल-लिंक {पैडिंग: 3 पीएक्स; मार्जिन-राइट: 10px; } .dashicons {font-size: 30px; रंग: #fff; चौड़ाई: 40 पीएक्स; ऊंचाई: 40 पीएक्स; सीमा-त्रिज्या: 50%; प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; }

यह उपरोक्त कोड रंग को छोड़कर आइकन की सभी विशेषताओं को जोड़ देगा। माउस को रंग जोड़ने के लिए नीचे दिए गए कोड का उपयोग करें जो केवल तब दिखाई देगा।

.dashicons-facebook-alt {पृष्ठभूमि: # 1877F2; }। डेशिकोन्स-ट्विटर {बैकग्राउंड: # 1DA1F2; }

यदि आप अधिक आइकन जोड़ते हैं, तो आप अपनी कक्षा और उपरोक्त सीएसएस का उपयोग करके प्रत्येक आइकन के लिए एक अलग पृष्ठभूमि का रंग जोड़ सकते हैं।

एक साधारण हॉवर प्रभाव जोड़ना चाहते हैं? अपने सीएसएस में इसे जोड़ें यदि आप एक 'ग्रो इन' होवर प्रभाव दिखाना चाहते हैं

.dashicons: होवर {-वेबकैट-ट्रांसफॉर्म: स्केल (1.2); -ms- परिवर्तन: स्केल (1.2); रूपांतर: स्केल (1.2); }

इतना ही! अब वेबसाइट कैशे को क्लियर करें और अपने विजेट को चेक करें, यह इस तरह प्रदर्शित होगा

If you follow the steps exactly, you will get it working.
If not, then comment down below, and I can help you to solve it.