أيقونات

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

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

ما يفعله حقل الأيقونات #

• فهو يضيف مربع أيقونة إلى لوحة عنصر واجهة المستخدم الخاص بك في Elementor، مع أزرار لمكتبة الأيقونات وتحميل SVG.
• تتضمن مكتبة الأيقونات Font Awesome ومجموعات الأيقونات الإضافية التي تأتي مع الإضافات الرئيسية، مثل أيقونات Elementor وأيقونات Simple Line والأيقونات الخطية وأيقونات المواد.
• يخزن الحقل شيئين: value (فئة CSS الخاصة بالرمز، أو ملف SVG للتحميل) و library (من أي مجموعة جاءت).
• القالب الخاص بك يطبع <i> علامة لأيقونات المكتبة و <img> علامة لSVGs التي تم تحميلها.

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Feature List”: حقل أيقونات مسمى feature_icon وحقل نصي للعنوان.

كيفية إضافة حقل الرموز #

1. اذهب الى الإضافات الرئيسية > منشئ القطعة وافتح القطعة الخاصة بك.
2. على ال محتوى علامة التبويب، أضف قسمًا، على سبيل المثال “Feature”.
3. يكتب icons في مربع البحث الميداني على اليسار.
4. يجر أيقونات في القسم. فتح إعداداته في الشريط الجانبي الأيسر.

شرح خيارات حقل الأيقونات #

• ملصق هو النص الموجود أعلى مربع الأيقونة في Elementor، على سبيل المثال “Feature Icon”.
• اسم هل المعرف الفريد للحقل وبداية الرموز المميزة الخاصة به، إذن feature_icon يعطي {{ feature_icon.value }}. الحروف والأرقام والتسطير فقط.
• وصف يظهر تحت السيطرة في Elementor.
• جلد العروض المضمنة والوسائط. إنه يغير كيفية رسم المعاينة الخاصة بالمنشئ للحقل. في اختباراتنا، أظهر Elementor مربع الأيقونات الكبير في كلتا الحالتين.
• القيمة الافتراضية هل الأيقونة نسخة جديدة من الأداة تبدأ بـ. انقر تغيير الأيقونة لاختيار واحد، أو الصليب الصغير لمسحه. مع عدم وجود مجموعة افتراضية، يبدأ الحقل برمز شعار Elementor.

يؤدي تغيير الرمز إلى فتح منتقي أيقونات الإضافات الرئيسية. اختر مجموعة على اليسار، وابحث بالاسم، وانقر على أيقونة ثم يُدرج.

اطبع الأيقونة في القالب الخاص بك #

{{ feature_icon }} لا يطبع شيئًا بمفرده، لأن الحقل يحمل قيمتين. استخدم أجزائه بدلاً من ذلك

• {{ feature_icon.value }} هي فئة الأيقونات لأيقونة المكتبة، مثل eicon eicon-check. بالنسبة إلى SVG الذي تم تحميله، فإنه يطبع عنوان URL للملف.
• {{ feature_icon.library }} هو اسم المجموعة، مثل eicons, simple-line-icons أو svg للتحميل.
• {{ feature_icon.value.url }} هو عنوان URL الخاص بـ SVG عندما تكون المكتبة كذلك svg.

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

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}

أيقونات المكتبة عبارة عن حروف رسومية للخط، لذا فهي تأخذ color و font-size من العنصر من حولهم. تم تحميل SVG في <img> تحتفظ العلامة بألوانها الخاصة، لذا قم بقياسها width و height في علامة التبويب CSS.

انقر حفظ الإعدادات عندما تنتهي.

استخدم عنصر تحكم الأيقونات في Elementor #

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

مكتبة الأيقونات يفتح نافذة أيقونة العنصر. اختر مجموعة على اليسار، وقم بالتصفية حسب الاسم، وانقر فوق أيقونة وانقر فوق يُدرج. تحميل SVG يفتح مكتبة الوسائط حتى تتمكن من تحميل أو اختيار ملف SVG. قد يطلب منك Elementor السماح بتحميل SVG في المرة الأولى.

أيقونات الخط الرائعة وأيقونات الخط المضمنة #

في موقع الاختبار الخاص بنا، ظهرت كل من Elementor Icons وSimple Line Icons وSVGs التي تم تحميلها على الصفحة المنشورة، لكن أيقونة Font Awesome لم تظهر. العنصر أيقونات الخط المضمنة الميزة قيد التشغيل افتراضيًا، وهي تمنع تحميل ورقة أنماط Font Awesome، وبالتالي فإن <i> تظل العلامة من الأداة فارغة. انتقل إلى العنصر > الإعدادات > الميزاتقم بتعيين أيقونات الخط المضمنة على غير نشط وحفظ. ثم ظهرت أيقونة Font Awesome. إذا كنت تفضل الاحتفاظ بهذه الميزة، فاستخدم مجموعات الرموز الأخرى أو تحميل SVG.

حالات الاستخدام الشائعة #

• قوائم الميزات ومربعات المعلومات مع أيقونة بجانب كل عنوان.
• أزرار ذات رمز بادئ أو لاحق.
• الروابط الاجتماعية وتفاصيل الاتصال وقائمة الرصاص.
• علامات العلامة التجارية، عن طريق تحميل الشعار باعتباره SVG.

نصائح للعمل مع مجال الأيقونات #

• تعامل دائمًا مع كلتا الحالتين في القالب: <i> لأيقونات المكتبة و <img> لتحميلات SVG.
• حراسة مع {% if feature_icon.value %} لذا فإن الأيقونة الفارغة لا تترك غلافًا فارغًا خلفها.
• قم بتعيين قيمة افتراضية تناسب عنصر واجهة المستخدم، بحيث لا تظهر شعار Elementor أبدًا عن طريق الصدفة.
• قم بتصميم الغلاف، وليس علامة الأيقونة، بحيث يوجد كلا النوعين من الأيقونات في نفس المربع.
• حدد اختيار Font Awesome على الصفحة المباشرة قبل الاعتماد عليه (راجع القسم أعلاه).
• للصور بدلاً من الرموز، استخدم المجال الإعلامي.

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

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

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