كيفية إضافة أيقونات مخصصة في Elementor: 3 طرق

الوجبات السريعة الرئيسية

• تعرض النافذة المنبثقة لمكتبة أيقونات Elementor فقط Font Awesome افتراضيًا، في المجموعات العادية والصلبة والعلامات التجارية، وكل عنصر واجهة مستخدم به حقل أيقونة يفتح نفس النافذة المنبثقة.
• أسرع طريقة لإضافة أيقونات مخصصة في Elementor هي زر تحميل SVG الموجود في حقل الأيقونة؛ إذا تم رفض الملف، فقم بتشغيل تمكين تحميلات الملفات غير المفلترة ضمن Elementor > الإعدادات > Advanced.
• تستورد شاشة الرموز المخصصة الخاصة بـ Elementor Pro خط أيقونة كاملاً من ملف Fontello أو IcoMoon أو Fontastic .zip وتدرجه ضمن مكتباتي في النافذة المنبثقة لمكتبة الأيقونات.
• يقوم Elementor Pro أيضًا بتوصيل Font Awesome Pro: الصق معرف المجموعة الخاص بك ضمن Elementor > الإعدادات > التكاملات وانقر فوق Validate Kit ID لإضافة أنماط Pro إلى المنتقي.
• يضيف ملحق مكتبة أيقونات Master Addons 8 حزم أيقونات تحتوي على 5344 رمزًا إلى نفس النافذة المنبثقة، وتتطلب أيقونات Feather وRemix Icon وTeenyicons في تلك المجموعة Master Addons Pro.

يمكنك إضافة أيقونات مخصصة في Elementor بثلاث طرق: تحميل SVG في أي حقل أيقونة، أو استيراد خط الأيقونات الخاص بك باستخدام Elementor Pro، أو تشغيل حزم الأيقونات الإضافية من Master Addons. ينتهي الأمر بالثلاثة جميعًا في نفس النافذة المنبثقة لمكتبة الأيقونات، والتي تقدم Font Awesome فقط حتى تضيف شيئًا إليها.

يمشي هذا الدليل عبر كل طريقة مع الإعدادات الدقيقة للنقر عليها، ثم يقارنها في جدول واحد حتى تتمكن من اختيار الجدول الصحيح. بعد ذلك، يغطي التصميم (اللون والحجم والتحليق) والمشكلات التي يواجهها الأشخاص في أغلب الأحيان، مثل الرموز التي تظهر كمربعات فارغة.

ثلاث طرق لإضافة أيقونات مخصصة في Elementor

تعتمد الطريقة المناسبة على عدد الرموز التي تحتاجها وما إذا كانت لديك بالفعل كملفات.

• بالنسبة لواحد أو اثنين من الرموز، مثل علامة الشعار، قم بتحميل SVG مباشرة إلى حقل الرمز (الطريقة 1).
• بالنسبة لمجموعة علامتك التجارية الخاصة، قم باستيرادها كخط أيقونة باستخدام أيقونات Elementor Pro المخصصة (الطريقة 2).
• للحصول على مجموعة كبيرة من الرموز الجاهزة التي لا يوجد بها أي شيء للتحميل، قم بتشغيل حزم الرموز في Master Addons (الطريقة 3).

يمكنك مزج الثلاثة في صفحة واحدة. يمكن وضع كل من SVG التي تم تحميلها ومجموعة الرموز المخصصة وFont Awesome وحزمة Master Addons في نفس الصفحة، لأن كل واحدة منها هي مجرد مصدر آخر لنفس حقل الأيقونات.

الطريقة الأولى: مكتبة الأيقونات المضمنة في Elementor وتحميل SVG

تفتح كل عنصر واجهة مستخدم Elementor يحتوي على حقل أيقونة نفس النافذة المنبثقة لمكتبة الأيقونات، سواء كانت أيقونة أو مربع أيقونة أو قائمة أيقونات أو زر أو أيقونات اجتماعية. خارج المربع الذي يسرد النافذة المنبثقة Font Awesome في ثلاث مجموعات: عادي، وصلب، وBrands.

1. أضف عنصر واجهة مستخدم Icon، أو أي عنصر واجهة مستخدم يحتوي على رمز، إلى صفحتك.
2. في علامة التبويب "المحتوى"، قم بالتمرير فوق معاينة الأيقونة. يظهر زران: مكتبة الأيقونات وتحميل SVG.
3. انقر فوق Icon Library لاختيار أيقونة Font Awesome، أو قم بتحميل SVG لاستخدام الملف الخاص بك.

يعد تحميل SVG أسرع طريقة لإضافة رمز مخصص واحد، مثل علامة شعار العميل. يقوم WordPress بحظر تحميلات SVG افتراضيًا، لذلك إذا رفض Elementor الملف، فقم بتشغيل تمكين تحميلات الملفات غير المفلترة ضمن Elementor > الإعدادات > Advanced. افعل ذلك فقط إذا كنت تثق في كل من يمكنه تحميل الملفات إلى الموقع، حيث يمكن لـ SVG حمل التعليمات البرمجية.

كل SVG هو تحميل خاص به، مع عدم وجود مجموعة للتصفح أو البحث لاحقًا. العنصر مقالة مساعدة في مكتبة الأيقونات يلاحظ أيضًا أن عناصر واجهة المستخدم Accordion وToggle تستخدم عناصر تحكم صغيرة في الأيقونات المضمنة بدلاً من المعاينة المعتادة، ولكنها تفتح نفس النافذة المنبثقة. بمجرد أن تحتاج إلى أكثر من عدد قليل من الرموز، فإن الطريقتين التاليتين توفران الوقت.

الطريقة الثانية: قم بتحميل مجموعة أيقونات باستخدام أيقونات Elementor Pro المخصصة

يمكن لـ Elementor Pro تحميل خط الأيقونة الخاص بك إلى المنتقي كعلامة تبويب منفصلة. يقبل الملفات المضغوطة المصدرة منها فونتيلوicomoon أو Fontastic، حتى تتمكن من إنشاء مجموعة من SVGs الخاصة بعلامتك التجارية والاحتفاظ بها في مكان واحد.

1. قم ببناء مجموعتك في Fontello أو IcoMoon أو Fontastic وقم بتنزيلها كملف.zip.
2. في WordPress، افتح شاشة الرموز المخصصة لـ Elementor. في Elementor 4 يوجد اختصار له على شاشة Elementor الرئيسية.
3. انقر فوق إضافة مجموعة أيقونات جديدة، ثم قم بإسقاط الملف .zip، وقم بتسمية المجموعة ونشرها.
4. افتح أي حقل أيقونة في المحرر. تظهر مجموعتك ضمن مكتباتي في النافذة المنبثقة لمكتبة الأيقونات.

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

ربط الخط رائع برو

يقوم Elementor Pro أيضًا بتوصيل اشتراك Font Awesome Pro. انتقل إلى Elementor > الإعدادات > عمليات التكامل، والصق معرف Font Awesome Pro Kit الخاص بك وانقر فوق Validate Kit ID. تظهر عائلات Pro بعد ذلك في المنتقي بجوار مجموعات Font Awesome القياسية.

الطريقة الثالثة: إضافة 8 حزم أيقونات مع الإضافات الرئيسية

ال مكتبة أيقونات الإضافات الرئيسية يضيف الامتداد ثماني حزم أيقونات كاملة، بإجمالي 5344 رمزًا، إلى النافذة المنبثقة لمكتبة الأيقونات. لا يتم تحميل أي شيء: تقوم بتشغيل الحزمة، وتظهر أيقوناتها في كل حقل أيقونة على الموقع.

يستغرق الإعداد ثلاث خطوات:

1. انتقل إلى الإضافات الرئيسية > الإعدادات > الملحقات، وانقر فوق عامل تصفية مكتبة الأيقونات، وقم بتشغيل الحزم التي تريدها وانقر فوق حفظ التغييرات.

2. افتح أي حقل أيقونة في Elementor وانقر فوق Icon Library. توجد الحزم الجديدة ضمن مكتباتي، ولكل منها شارة “M” صغيرة.
3. انقر فوق حزمة لتصفحها، أو اكتب تصفية بالاسم للبحث في كل حزمة مرة واحدة. حدد رمزًا وانقر فوق إدراج.

خط الأيقونات (الأيقونات) الخاص بـ Elementor ليس موجودًا في المنتقي الافتراضي. يضيف Master Addons جميع الرموز الإلكترونية البالغ عددها 398 كعلامة تبويب، مما يساعدك عندما تريد أيقونات تتطابق مع واجهة Elementor. تأتي أيقونات الريش وأيقونات الريمكس وTeenyicons مع ماستر أدونز برو.

استخدم Remix Icon للحالات المفتوحة والمغلقة

تأتي معظم أشكال أيقونات الريمكس في إصدار خطي وإصدار تعبئة. وهذا يجعلها مطابقة جيدة للعناصر ذات حالتي الرمز: في القطعة الأكورديون المتقدمة، أو الأكورديون والتبديل الخاص بـ Elementor، قم بتعيين المخطط التفصيلي كرمز مغلق والشكل المملوء كرمز مفتوح.

تفاصيل الإعداد وبادئة فئة CSS لكل حزمة وإصلاحات المشكلات الشائعة موجودة في مستندات إعدادات مكتبة الأيقونات.

ما هي الطريقة التي يجب عليك استخدامها؟

الطريقة الصحيحة تعتمد على ما لديك بالفعل.

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

كيفية تصميم الرموز في Elementor

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

تأخذ أيقونات الخطوط أي لون تقوم بتعيينه. يغطي ذلك مجموعات Font Awesome وCustom Icons وحزم Master Addons. يتغير لون SVG الذي تم تحميله فقط إذا كانت مساراته لا تحمل تعبئة ثابتة خاصة بها، لذا قم بشريط قيم التعبئة المشفرة من الملف قبل تحميله.

تظهر نفس عناصر التحكم في عناصر واجهة المستخدم الأخرى أيضًا. ال أداة صندوق المعلومات قم بإقران أيقونة بالعنوان والنص ودليلنا لـ أزرار متحركة في Elementor يوضح كيفية وضع أيقونة داخل زر وإعطائها لون التمرير الخاص بها.

استكشاف أخطاء أيقونات العنصر وإصلاحها

تعود معظم مشكلات الأيقونات إلى ملف خط لم يتم تحميله أو إعداد لم يتم حفظه.

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

خط الأيقونة لا يتم تحميله. مسح ذاكرة التخزين المؤقت لـ Elementor ضمن Elementor > Tools > عام (مسح الملفات والبيانات)، ثم قم بمسح البرنامج الإضافي للتخزين المؤقت وCDN. إذا تم تحميل الخطوط الخاصة بك من CDN في مجال آخر، فتأكد من أنها تسمح بطلبات عبر الأصل لملفات الخطوط.

لن يقبل Elementor جهاز SVG الخاص بي

قم بتشغيل تمكين تحميلات الملفات غير المصفاة ضمن Elementor > الإعدادات > Advanced، ثم حاول التحميل مرة أخرى. إذا استمر فشله، افتح SVG في محرر النصوص وتأكد من أنه ملف SVG حقيقي وليس PNG بامتداد .svg.

حزمة Master Addons مفقودة من المنتقي

تأكد من تشغيل مفتاح الحزمة ضمن Master Addons > الإعدادات > Extensions > Icon Library وأنك نقرت فوق حفظ التغييرات، ثم أعد تحميل المحرر. تحتاج Feather Icons وRemix Icon وTeenyicons أيضًا إلى Master Addons Pro بترخيص نشط.

تعمل خطوط الأيقونات على إبطاء الصفحة

كل خط أيقونة هو ملف آخر يمكن للمتصفح تنزيله. التزم بحزمة واحدة أو حزمتين للحصول على مظهر متسق، واقرأ دليلنا تسريع مواقع Elementor، والذي يغطي خيار Elementor's Inline Font Icons لعرض الرموز على شكل SVG بدلاً من ملفات الخطوط.

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

الأفكار النهائية

إضافة أيقونات مخصصة في Elementor تصل إلى المكان الذي تبدأ فيه أيقوناتك. ينتقل SVG واحد مباشرة إلى حقل الأيقونات. ينتقل خط أيقونة العلامة التجارية عبر أيقونات Elementor Pro المخصصة، بجوار Font Awesome Pro إذا كان لديك مجموعة أدوات. وإذا كنت تفضل الالتقاط بدلاً من التحميل، فإن حزم Master Addons الثمانية تضع 5344 رمزًا إضافيًا في نفس النافذة المنبثقة.

لرؤية كل حزمة تحتوي على عينات وعدد الرموز قبل تشغيل أي شيء، تصفح مكتبة أيقونات العنصر صفحة.

القراءة ذات الصلة

• إعدادات مكتبة الأيقونات: المفاتيح وبادئات CSS واستكشاف الأخطاء وإصلاحها لجميع الحزم الثمانية
• التحكم في الأيقونات في منشئ عناصر واجهة المستخدم: استخدم الحزم الموجودة في عناصر واجهة المستخدم المخصصة الخاصة بك
• كيفية إضافة رمز Font Awesome إلى زر إرسال نموذج الاتصال 7
• جميع عناصر واجهة المستخدم والإضافات الرئيسية