संपर्क फ़ॉर्म ७ सबमिट बटन में फ़ॉन्ट विस्मयकारी आइकन कैसे जोड़ें

आपके संपर्क फ़ॉर्म पर एक सादा “Submit” बटन सामान्य दिखता है। एक जोड़ना अपने संपर्क फ़ॉर्म 7 सबमिट बटन के अंदर अद्भुत आइकन फ़ॉन्ट करें इसे एक दृश्य संकेत देता है जो ध्यान आकर्षित करता है और कार्रवाई को स्पष्ट करता है “Send Message” के बगल में एक पेपर प्लेन आइकन या “Submit।” के बगल में एक लिफाफा आइकन के बारे में सोचें

पकड़ संपर्क फ़ॉर्म ७ में बटन में आइकन जोड़ने के लिए एक अंतर्निहित विकल्प नहीं है आपको आइकन के यूनिकोड हेक्स कोड को सीधे सीएफ ७ फॉर्म टैग में डालने और सही फ़ॉन्ट लोड करने के लिए इसे एक छोटे सीएसएस स्निपेट के साथ जोड़ना होगा।

यह ट्यूटोरियल आपको पूरी प्रक्रिया के माध्यम से कदम से कदम चलता है आप सीखेंगे कि कैसे एक जोड़ना है CF7 सबमिट बटन पर अद्भुत आइकन फ़ॉन्ट करेंं, फॉर्म फ़ील्ड प्लेसहोल्डर के अंदर आइकन जोड़ें, और दोनों एलिमेंट उपयोगकर्ताओं और गैर-एलिमेंट सेटअप के लिए फ़ॉन्ट विस्मयकारी फ़ॉन्ट-परिवार सेटअप को संभालें फ़ॉन्ट विस्मयकारी ५, ६ और नवीनतम २०२६ एलिमेंट संस्करणों के लिए अपडेट किया गया।

आपको क्या चाहिए

आरंभ करने से पहले, सुनिश्चित करें कि आपके पास ये जगह हैंः

• वर्डप्रेस साथ संपर्क फ़ॉर्म ७ स्थापित और सक्रिय
• फ़ॉन्ट अद्भुत आपकी साइट पर लोड किया गया (एलिमेंटर, प्लगइन या मैनुअल सीडीएन के माध्यम से)
• आपकी थीम तक पहुंच कस्टम सीएसएस पैनल (उपस्थिति> अनुकूलित करें> अतिरिक्त सीएसएस)
• आपके वांछित आइकन के लिए यूनिकोड हेक्स कोड (हम आपको दिखाएंगे कि इसे कहां खोजना है)

समय की आवश्यकताः 5-10 मिनट

कौशल स्तरः शुरुआती (कोई कोडिंग अनुभव की आवश्यकता नहीं है, बस कॉपी और पेस्ट करें)

चरण १: अपनी साइट पर फ़ॉन्ट विस्मयकारी सक्षम करें

किसी भी आइकन को प्रस्तुत करने से पहले आपकी साइट को फ़ॉन्ट विस्मयकारी लोड की आवश्यकता है आप यह कैसे करते हैं यह आपके सेटअप पर निर्भर करता हैः

यदि आप एलिमेंट (सबसे आसान तरीका) का उपयोग कर रहे हैं

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

1. को जा एलिमेंटर > सेटिंग्स > उन्नत अपने वर्डप्रेस डैशबोर्ड में टैब करें
2. ढूंढना “लोड फ़ॉन्ट अद्भुत 4 समर्थन” और इसे सेट करें “हाँ”
3. क्लिक करें परिवर्तन सहेजें

2026 अपडेट: एलिमेंटर अब हाल के संस्करणों में डिफ़ॉल्ट रूप से फ़ॉन्ट विस्मयकारी ६ लोड करता है “लोड फ़ॉन्ट विस्मयकारी ४ समर्थन” टॉगल पुराने आइकन कोड के साथ पिछड़े संगतता सुनिश्चित करता है यदि आप एफए ६ आइकन कोड का उपयोग कर रहे हैं (जैसे कि उन से) फ़ॉन्ट विस्मयकारी ६ आइकन खोज), आपको कुछ भी बदलने की आवश्यकता नहीं है क्योंकि एलिमेंटर इसे स्वचालित रूप से संभालता है।

यदि आप भी उपयोग कर रहे हैं एलिमेंट के लिए मास्टर ऐडऑनू तक पहुँच प्राप्त होती है ८ प्रीमियम आइकन लाइब्रेरी फ़ॉन्ट विस्मयकारी से परे, आपको एलिमेंटर संपादक के ठीक अंदर हजारों अतिरिक्त आइकन दे रहा है।

यदि आप एलिमेंट का उपयोग नहीं कर रहे हैं

आधिकारिक स्थापित करें फ़ॉन्ट विस्मयकारी प्लगइन वर्डप्रेस.ओआरजी से. सक्रियण के बाद:

1. को जा सेटिंग्स > फ़ॉन्ट अद्भुत
2. अपना संस्करण चुनें (फ़ॉन्ट विस्मयकारी 5 मुफ़्त या 6 मुफ़्त)
3. डिलीवरी विधि चुनें (v5 के लिए CDN, या v6 के लिए एक किट)
4. सहेजें और आप अपनी साइट पर आइकन का उपयोग करने के लिए तैयार हैं

महत्वपूर्ण: फ़ॉन्ट विस्मयकारी ६ विरासत सीडीएन के माध्यम से उपलब्ध नहीं है यदि आप एफए ६ आइकन चाहते हैं, तो आपको एक मुफ्त किट सेट करने की आवश्यकता होगी fontawesome.com या वर्डप्रेस प्लगइन के किट एकीकरण का उपयोग करें।

चरण २: आइकन का यूनिकोड हेक्स कोड ढूंढें

प्रत्येक फ़ॉन्ट विस्मयकारी आइकन में एक अद्वितीय यूनिकोड हेक्स कोड होता है यह वह कोड है जिसे आप अपने संपर्क फ़ॉर्म ७ सबमिट बटन में पेस्ट करेंगे।

यहाँ यह कैसे खोजना हैः

1. के पास जाओ फ़ॉन्ट विस्मयकारी आइकन खोज पृष्ठ
2. अपने वांछित आइकन के लिए खोजें (जैसे, “पेपर प्लेन”, “एनवेलपेम, “एरो राइट”)
3. इसका डिटेल पेज खोलने के लिए आइकन पर क्लिक करें
4. के लिए देखो यूनिकोड मूल्य। यह 4-5 अक्षर वाला हेक्स कोड है f1d8 (कागज का तल) या f0e0 (लिफाफा)

सबमिट बटन और उनके यूनिकोड कोड के लिए यहां कुछ लोकप्रिय आइकन दिए गए हैंः

चरण ३: अपने संपर्क फ़ॉर्म ७ सबमिट बटन में फ़ॉन्ट विस्मयकारी चिह्न जोड़ें

अब मुख्य घटना के लिए आप आइकन के यूनिकोड हेक्स कोड को सीधे सीएफ ७ फॉर्म टैग में सम्मिलित करेंगे यहां सटीक प्रक्रिया हैः

अपना संपर्क फ़ॉर्म खोलें

को जा संपर्क > संपर्क प्रपत्र अपने वर्डप्रेस डैशबोर्ड में उस फॉर्म पर क्लिक करें जिसे आप संपादित करना चाहते हैं (या एक नया बनाना चाहते हैं)।

सबमिट बटन टैग ढूंढें

फॉर्म संपादक में, सबमिट बटन टैग की तलाश करें यह आम तौर पर इस तरह दिखता हैः

[submit "Submit"]

यूनिकोड हेक्स कोड डालें

सबमिट टैग को अपने बटन टेक्स्ट के बगल में रखे आइकन कोड से बदलें HTML इकाई प्रारूप का उपयोग करें &#x + हेक्स कोड + ;

उदाहरण के लिए, पाठ के बाद एक पेपर प्लेन आइकन जोड़ने के लिए “Send Message”ः

[submit "Send Message "]

या पाठ से पहले आइकन डालने के लिएः

[submit " Send Message"]

सबमिट बटन में आइकन के साथ यहां एक पूर्ण संपर्क फ़ॉर्म उदाहरण दिया गया हैः

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Subject
    [text your-subject]</label>

<label>Your Message
    [textarea your-message]</label>

[submit "Send Message &#xf1d8;"]

चरण ४: आइकन फ़ॉन्ट के लिए सीएसएस जोड़ें

आइकन तब तक सही ढंग से प्रदर्शित नहीं होगा जब तक आप ब्राउज़र को यह नहीं बताते कि सबमिट बटन के लिए किस फ़ॉन्ट का उपयोग करना है इस सीएसएस के बिना, आपको आइकन के बजाय एक छोटा वर्ग या प्रश्न चिह्न दिखाई देगा।

को जा दिखावट > अनुकूलित करें > अतिरिक्त सीएसएस और निम्नलिखित स्निपेट में से एक पेस्ट करेंः

फ़ॉन्ट विस्मयकारी 5 (एलिमेंटर डिफ़ॉल्ट) के लिए

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

फ़ॉन्ट विस्मयकारी ६ के लिए

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

द font-weight: 900 सॉलिड आइकनों (सबसे आम शैली) के लिए आवश्यक है यदि आप नियमित आइकनों का उपयोग कर रहे हैं, तो इसे बदलें font-weight: 400। ब्रांड आइकन (जैसे ट्विटर या GitHub लोगो) के लिए, उपयोग करें font-family: "Font Awesome 6 Brands" साथ font-weight: 400.

प्रो टिपः यदि आइकन डेस्कटॉप पर दिखता है लेकिन मोबाइल पर नहीं, तो जोड़ें -webkit-font-smoothing: antialiased; और text-rendering: auto; सीएसएस नियम के लिए। यह ब्राउज़रों में विसंगतियों को ठीक करता है।

अपना सीएसएस सहेजें और फॉर्म का पूर्वावलोकन करें अब आपको टेक्स्ट के बगल में अपने सबमिट बटन के अंदर प्रस्तुत आइकन देखना चाहिए।

बोनस: सीएफ ७ प्लेसहोल्डर फ़ील्ड में फ़ॉन्ट विस्मयकारी आइकन जोड़ें

अपने फॉर्म फ़ील्ड प्लेसहोल्डर के अंदर भी आइकन चाहते हैं आप ईमेल फ़ील्ड में एक लिफाफा आइकन जोड़ सकते हैं, नाम फ़ील्ड में एक उपयोगकर्ता आइकन, और संदेश फ़ील्ड में एक पेंसिल आइकन जोड़ सकते हैं यह एक ही यूनिकोड दृष्टिकोण लेता है।

यहां प्लेसहोल्डर्स में आइकन के साथ सीएफ ७ कोड हैः

[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[text your-subject placeholder " Subject"]

[textarea your-message placeholder " Your Message"]

[submit "Send Message "]

अब अपने प्लेसहोल्डर्स पर फ़ॉन्ट विस्मयकारी फ़ॉन्ट लागू करने के लिए सीएसएस जोड़ेंः

/* Icon font for submit button */
.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    font-family: "Font Awesome 5 Free", Arial, sans-serif;
    font-weight: 900;
    color: #999;
}

प्लेसहोल्डर फ़ॉन्ट्स पर नोटः सेटिंग font-family प्लेसहोल्डर पर सभी प्लेसहोल्डर टेक्स्ट को प्रभावित करता है, न कि केवल आइकन यदि आपके प्लेसहोल्डर टेक्स्ट के बाकी हिस्से अपेक्षा से अलग दिखते हैं, तो अपने थीम के बॉडी फ़ॉन्ट को फ़ॉलबैक के रूप में जोड़ेंः font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

नो-कोड विधि: एलिमेंट के लिए मास्टर ऐडऑन के साथ स्टाइल CF7

यदि आप सीएसएस को पूरी तरह से छोड़ देंगे, तो एलिमेंट के लिए मास्टर ऐडऑन एक समर्पित शामिल है संपर्क फ़ॉर्म ७ विजेट जो आपको कोड की एक भी पंक्ति लिखे बिना, अपने फॉर्म की उपस्थिति को दृश्य रूप से अनुकूलित करने देता है।

यहां बताया गया है कि आप इसके साथ क्या कर सकते हैं एमए संपर्क फ़ॉर्म ७ विजेट:

• सबमिट बटन को स्टाइल करें कस्टम रंग, ग्रेडिएंट, होवर प्रभाव, बॉर्डर और पैडिंग के साथ
• इनपुट फ़ील्ड अनुकूलित करें पृष्ठभूमि रंग, सीमा त्रिज्या और टाइपोग्राफी के साथ
• पूर्व-निर्मित शैली प्रीसेट लागू करें एक क्लिक में पॉलिश फॉर्म प्राप्त करने के लिए
• रिक्ति और लेआउट को नियंत्रित करें एलिमेंट पैनल से प्रत्येक फॉर्म तत्व के लिए
• किसी भी आइकन का उपयोग करें से ८ प्रीमियम आइकन लाइब्रेरी मास्टर एडॉन्स के साथ बंडल किया गया

यह सबसे तेज़ दृष्टिकोण है यदि आप चाहते हैं कि आपका संपर्क फ़ॉर्म सीएसएस चयनकर्ताओं में खुदाई किए बिना आपकी साइट के डिज़ाइन से मेल खाए बस विजेट को खींचें, अपना फॉर्म चुनें, और दृश्य संपादक से सब कुछ स्टाइल करें।

सामान्य मुद्दों का निवारण

आइकन एक वर्ग बॉक्स या प्रश्न चिह्न के रूप में दिखाता है

इसका मतलब है कि फ़ॉन्ट विस्मयकारी फ़ॉन्ट सबमिट बटन के लिए लोड नहीं हो रहा है इसे दोबारा जांचेंः

• फ़ॉन्ट विस्मयकारी आपकी साइट (एलिमेंट सेटिंग या एफए प्लगइन) पर सक्रिय है
• आपके सीएसएस में सही शामिल है font-family और font-weight
• आप सही संस्करण का उपयोग कर रहे हैं (एफए ५ बनाम एफए ६ फ़ॉन्ट-परिवार के नाम अलग हैं)

आइकन दिखाई देता है लेकिन नियमित पाठ अजीब लगता है

जब आप सेट करते हैं font-family फ़ॉन्ट के लिए पूरे बटन के लिए बहुत बढ़िया, बटन में सभी पाठ उस फ़ॉन्ट का उपयोग करता है एक फ़ॉलबैक फ़ॉन्ट जोड़ेंः font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

आइकन डेस्कटॉप पर काम करता है लेकिन मोबाइल पर नहीं

इन गुणों को अपने सीएसएस नियम में जोड़ेंः

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

मैं इसके बजाय एक ः: छद्म तत्व से पहले का उपयोग करना चाहते हैं

CF7 सबमिट बटन एक है <input type="submit"> तत्व इनपुट तत्व समर्थन नहीं करते हैं ::before या ::after छद्म तत्व क्योंकि उनके पास बच्चे नोड्स नहीं हो सकते हैं यही कारण है कि हम इसके बजाय बटन पाठ में सीधे यूनिकोड हेक्स दृष्टिकोण का उपयोग करते हैं यदि आपको छद्म तत्व समर्थन की आवश्यकता है, तो आपको सबमिट बटन को एक में परिवर्तित करने की आवश्यकता होगी <button> CF7 फ़िल्टर हुक का उपयोग करके टैग करें, जिसके लिए कस्टम PHP की आवश्यकता होती है।

अक्सर पूछे जाने वाले प्रश्न

रैपिंग अप

एक जोड़ना अपने संपर्क फ़ॉर्म 7 सबमिट बटन पर अद्भुत आइकन फ़ॉन्ट करें एक छोटा सा बदलाव है जो ध्यान देने योग्य अंतर बनाता है यूनिकोड हेक्स कोड विधि फ़ॉन्ट विस्मयकारी ५ और ६ में काम करती है, केवल दो चरणों की आवश्यकता होती है (फॉर्म टैग संपादित करें + सीएसएस जोड़ें), और सेट अप करने में ५ मिनट से कम समय लगता है।

प्लेसहोल्डर दृष्टिकोण के लिए, एक ही तर्क लागू होता है: प्लेसहोल्डर विशेषता के अंदर हेक्स कोड पेस्ट करें और अपने सीएसएस में फ़ॉन्ट-परिवार को परिभाषित करें दोनों विधियां आपके रूपों को अधिक पॉलिश, पेशेवर महसूस देती हैं।

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

संबंधित पढ़नाः एलिमेंटर आइकन और फ़ॉन्ट लाइब्रेरी गाइड | एलिमेंटर में एनिमेटेड बटन कैसे बनाएं | मास्टर ऐडऑन के साथ CF7 स्टाइलिंग