كيفية إضافة أيقونة الخط الرائعة إلى زر إرسال نموذج الاتصال 7

يبدو زر “Submit” العادي في نموذج الاتصال الخاص بك عامًا. إضافة أ أيقونة الخط الرائعة داخل زر إرسال نموذج الاتصال 7 الخاص بك يمنحها إشارة مرئية تلفت الانتباه وتجعل الإجراء أكثر وضوحًا. فكر في أيقونة المستوى الورقي بجوار “Send message” أو أيقونة المغلف بجوار “Submit.”

الصيد؟ لا يحتوي نموذج الاتصال 7 على خيار مدمج لإضافة أيقونات إلى الأزرار. تحتاج إلى إدراج رمز Unicode السداسي الخاص بالأيقونة مباشرةً في علامة نموذج CF7 وإقرانه بمقتطف CSS صغير لتحميل الخط الصحيح.

يرشدك هذا البرنامج التعليمي خلال العملية بأكملها خطوة بخطوة. سوف تتعلم كيفية إضافة أ أيقونة الخط الرائعة لزر الإرسال CF7، أضف أيقونات داخل العناصر النائبة لحقل النموذج، وتعامل مع إعداد عائلة الخطوط Font Awesome لكل من مستخدمي Elementor والإعدادات غير التابعة لـ Elementor. تم تحديثه لـ Font Awesome 5 و6 وأحدث إصدارات Elementor لعام 2026.

ما سوف تحتاج

قبل البدء، تأكد من وجود هذه الأشياء في مكانها الصحيح

• ووردبريس مع نموذج الاتصال 7 تم التثبيت والتنشيط
• الخط رائع تم تحميله على موقعك (عبر Elementor أو مكون إضافي أو CDN يدوي)
• الوصول إلى موضوعك Css مخصص اللوحة (المظهر > التخصيص > CSS الإضافي)
• رمز Unicode السداسي للرمز المطلوب (سنوضح لك مكان العثور على هذا)

الوقت اللازم: 5-10 دقائق

مستوى المهارة: مبتدئ (لا حاجة لخبرة في البرمجة، فقط انسخ والصق)

الخطوة 1: تمكين الخط الرائع على موقعك

يحتاج موقعك إلى تحميل Font Awesome قبل عرض أي أيقونات. تعتمد كيفية القيام بذلك على الإعداد الخاص بك

إذا كنت تستخدم Elementor (أسهل طريقة)

يأتي العنصر مزودًا بـ Font Awesome المدمج. كل ما عليك فعله هو التأكد من تمكين التوافق مع الإصدارات السابقة لـ Font Awesome 4 إذا كنت تستخدم رموز أيقونات قديمة.

1. اذهب إلى العنصر > الإعدادات > المتقدم علامة التبويب في لوحة تحكم WordPress الخاصة بك
2. يجد “تحميل الخط رائع 4 دعم” وضبطه على “Yes”
3. انقر حفظ التغييرات

تحديث 2026: يقوم Elementor الآن بتحميل Font Awesome 6 افتراضيًا في الإصدارات الحديثة. يضمن تبديل “Load Font Awesome 4 Support” التوافق مع الإصدارات السابقة مع رموز الأيقونات القديمة. إذا كنت تستخدم رموز أيقونات FA6 (مثل تلك الموجودة في بحث رائع عن أيقونات الخط 6)، لا تحتاج إلى تغيير أي شيء نظرًا لأن Elementor يتعامل معه تلقائيًا.

إذا كنت تستخدم أيضا الإضافات الرئيسية للعنصر، يمكنك الوصول إلى 8 مكتبات أيقونات متميزة beyond Font Awesome، مما يمنحك آلاف الرموز الإضافية داخل محرر Elementor مباشرةً.

إذا كنت لا تستخدم Elementor

تثبيت المسؤول البرنامج المساعد الخط رائع من WordPress.org. بعد التنشيط:

1. اذهب إلى الإعدادات > الخط رائع
2. اختر الإصدار الخاص بك (Font Awesome 5 Free أو 6 Free)
3. حدد طريقة التسليم (CDN للإصدار 5، أو مجموعة الإصدار 6)
4. احفظ وستكون جاهزًا لاستخدام الرموز عبر موقعك

مهم: الخط Awesome 6 غير متوفر عبر شبكة CDN القديمة. إذا كنت تريد أيقونات FA6، فستحتاج إلى إعداد مجموعة مجانية على fontawesome.com أو استخدم تكامل مجموعة أدوات البرنامج المساعد WordPress.

الخطوة 2: ابحث عن رمز Unicode Hex الخاص بالأيقونة

يحتوي كل رمز Font Awesome على رمز Unicode سداسي عشري فريد. هذا هو الرمز الذي ستلصقه في زر إرسال نموذج الاتصال 7 الخاص بك.

وإليك كيفية العثور عليه:

1. اذهب إلى صفحة بحث أيقونة الخط رائعة
2. ابحث عن الرمز المطلوب (على سبيل المثال، “paper planel”، “envelope”، “arrow right”)
3. انقر على الأيقونة لفتح صفحة التفاصيل الخاصة بها
4. ابحث عن يونيكود قيمة. إنه رمز سداسي عشري مكون من 4-5 أحرف f1d8 (الطائرة الورقية) أو f0e0 (مظروف)

فيما يلي بعض الرموز الشائعة لأزرار الإرسال ورموز Unicode الخاصة بها

الخطوة 3: أضف أيقونة الخط الرائع إلى زر إرسال نموذج الاتصال 7 الخاص بك

الآن للحدث الرئيسي. ستقوم بإدراج رمز Unicode السداسي الخاص بالأيقونة مباشرة في علامة نموذج CF7. إليك العملية الدقيقة:

افتح نموذج الاتصال الخاص بك

اذهب إلى الاتصال > نماذج الاتصال في لوحة تحكم ووردبريس الخاصة بك. انقر على النموذج الذي تريد تحريره (أو إنشاء نموذج جديد).

ابحث عن علامة زر الإرسال

في محرر النماذج، ابحث عن علامة زر الإرسال. يبدو عادة مثل هذا:

[submit "Submit"]

أدخل رمز Unicode السداسي

استبدل علامة الإرسال برمز الرمز الموجود بجوار نص الزر الخاص بك. استخدم تنسيق كيان 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;"]

الخطوة 4: أضف CSS لخط الأيقونة

لن يتم عرض الرمز بشكل صحيح حتى تخبر المتصفح بالخط الذي يجب استخدامه لزر الإرسال. بدون CSS هذا، سترى مربعًا صغيرًا أو علامة استفهام بدلاً من الرمز.

اذهب إلى المظهر > التخصيص > CSS الإضافي ولصق أحد المقتطفات التالية:

للخط الرائع 5 (العنصر الافتراضي)

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

للخط الرائع 6

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

ال font-weight: 900 مطلوب للأيقونات الصلبة (النمط الأكثر شيوعًا). إذا كنت تستخدم أيقونات عادية، قم بتغييرها إلى font-weight: 400. بالنسبة لأيقونات العلامة التجارية (مثل شعار Twitter أو GitHub)، استخدم font-family: "Font Awesome 6 Brands" مع font-weight: 400.

نصيحة احترافية: إذا ظهر الرمز على سطح المكتب ولكن ليس على الهاتف المحمول، أضف -webkit-font-smoothing: antialiased; و text-rendering: auto; إلى قاعدة CSS. يعمل هذا على إصلاح عدم الاتساق في العرض عبر المتصفحات.

احفظ CSS الخاص بك وقم بمعاينة النموذج. يجب عليك الآن رؤية الرمز المعروض داخل زر الإرسال بجوار النص.

المكافأة: أضف أيقونات الخط الرائعة إلى حقول العنصر النائب CF7

هل تريد أيقونات داخل العناصر النائبة لحقل النموذج الخاص بك أيضًا؟ يمكنك إضافة رمز مغلف في حقل البريد الإلكتروني، ورمز مستخدم في حقل الاسم، ورمز قلم رصاص في حقل الرسالة. يأخذ نفس نهج Unicode.

إليك رمز CF7 مع الرموز الموجودة في العناصر النائبة:

[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 "]

أضف الآن CSS لتطبيق خط Font Awesome على العناصر النائبة لديك

/* 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;

طريقة عدم وجود رمز: Style CF7 مع الإضافات الرئيسية لـ Elementor

إذا كنت تفضل تخطي CSS بالكامل، الإضافات الرئيسية للعنصر يتضمن مخصصا نموذج الاتصال 7 أداة تتيح لك تخصيص مظهر النموذج الخاص بك بشكل مرئي، دون كتابة سطر واحد من التعليمات البرمجية.

إليك ما يمكنك فعله بـ نموذج الاتصال MA 7 القطعة:

• قم بتصميم زر الإرسال مع الألوان المخصصة والتدرجات وتأثيرات التمرير والحدود والحشو
• تخصيص حقول الإدخال مع ألوان الخلفية ونصف قطر الحدود والطباعة
• تطبيق الإعدادات المسبقة للنمط المعدة مسبقًا للحصول على شكل مصقول بنقرة واحدة
• التحكم في التباعد والتخطيط لكل عنصر نموذج من لوحة Elementor
• استخدم أي رمز من 8 مكتبات أيقونات متميزة مجمعة مع الإضافات الرئيسية

هذا هو النهج الأسرع إذا كنت تريد أن يتطابق نموذج الاتصال الخاص بك مع تصميم موقعك دون البحث في محددات CSS. ما عليك سوى سحب الأداة واختيار النموذج الخاص بك وتصميم كل شيء من المحرر المرئي.

استكشاف المشكلات الشائعة وإصلاحها

تظهر الأيقونة كمربع مربع أو علامة استفهام

هذا يعني أن الخط Font Awesome لا يتم تحميله لزر الإرسال. التحقق مرة أخرى من ذلك:

• يتم تنشيط Font Awesome على موقعك (إعداد العنصر أو البرنامج المساعد FA)
• يتضمن CSS الخاص بك الصحيح font-family و font-weight
• أنت تستخدم الإصدار الصحيح (تختلف أسماء عائلة الخطوط FA5 مقابل FA6)

تظهر الأيقونة ولكن النص العادي يبدو غريبًا

عندما تحدد font-family إلى Font Awesome للزر بأكمله، يستخدم كل النص الموجود في الزر هذا الخط. إضافة خط احتياطي: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

يعمل الرمز على سطح المكتب ولكن ليس على الهاتف المحمول

أضف هذه الخصائص إلى قاعدة CSS الخاصة بك:

.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 العناصر الزائفة لأنها لا يمكن أن تحتوي على عقد فرعية. ولهذا السبب نستخدم أسلوب Unicode السداسي مباشرة في نص الزر بدلاً من ذلك. إذا كنت بحاجة إلى دعم العناصر الزائفة، فستحتاج إلى تحويل زر الإرسال إلى <button> ضع علامة باستخدام خطاف مرشح CF7، الأمر الذي يتطلب PHP مخصصًا.

الأسئلة المتداولة

إلتحاق بالركب

إضافة أ أيقونة الخط الرائعة لزر إرسال نموذج الاتصال 7 الخاص بك هو تغيير بسيط يحدث فرقا ملحوظا. تعمل طريقة Unicode hex code عبر الخطين Awesome 5 و6، وتتطلب خطوتين فقط (تحرير علامة النموذج + إضافة CSS)، ويستغرق الإعداد أقل من 5 دقائق.

بالنسبة لنهج العنصر النائب، ينطبق نفس المنطق: الصق الكود السداسي داخل سمة العنصر النائب وحدد عائلة الخطوط في CSS الخاص بك. كلتا الطريقتين تمنحان نماذجك إحساسًا احترافيًا أكثر صقلًا.

إذا كنت تريد تخطي CSS بالكامل، فإن واجهة مستخدم الإضافات الرئيسية CF7 يتعامل مع تصميم النموذج بشكل مرئي داخل Elementor. وفي كلتا الحالتين، ستبدو نماذجك أفضل من مخرجات CF7 الافتراضية.

القراءة ذات الصلة: أيقونات العنصر ودليل مكتبات الخطوط | كيفية إنشاء أزرار متحركة في Elementor | تصميم CF7 مع الإضافات الرئيسية