سوف نقوم باضافة ايقونة الى قائمة قالب DIVI سوف يكون الشرح على ثلاث مسارات هي

  1. اضافة ايقونة الى قائمة جميع روابط القائمة في قالب DIVI
  2. اضافة ايقونة الى جميع القوائم الفرعية
  3. اضافة ايقونة خاصة مع اسم الصفحة لكل رابط في قالب DIVI
  4. اضافة ايقونه خاصه بدل اسم اصفحة في قالب DIVI

لمزيد من المواضيع عن قالب DIVI يرجى زيارة شرح قالب DIVI

محتوى المقالة

اضافة ايقونة الى قائمة جميع روابط قائمة قالب DIVI:

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

الخطوة الاولى انسخ رمز ايقونه الى قائمة :

اختر الايقونه المناسبة من قائمة ايقونات ET يرجى ملاحظة ان الرمز لليقونة المختارة () سوف نقوم بنسخ بعد حرف ال x مع الارقام فقط مثل (e009)

قائمة ايقونات ET

الخطوة الثانية نسخ الكود الى CSS الخاص في القالب

نذهب الى DIVI >اعدادات السمة > CSS الخاص بعدها نقوم بلصق الكود التالي 

/*اضافة ايقونه الى قائمة الرئيسية*/

.nav li a:before {
    font-family: 'ETMODULES';
    content: '\24';
    text-align: center;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: -10px;
    color: #2cba6c;
    font-size: 1em;
    transition: all .3s ease;
}

الخطوة الثالثة تعديل الايقونة في الكود

قمنا بختيار ايقونه رمزها e009 نقوم بتعديل الكود

content: ‘\24’; قبل

content: ‘\e009’ بعد فقط غيرنا الرمز السابق

عند الانهاء سوف نجد القائمة اصبحت كالتالي

صورة توضيحية للايقونة

كما نشاهد الكود اضاف ايقونه سهم لكل رابط في القائمة.

الخطوة الرابعة التعديل على الكود لتنسيق ال ايقونه الى قائمة

بامكانك التعديل على الكود بما يناسبك

شرح الكود :

font-family: ‘ETMODULES’;  نوع الخط و الخط المستخدم من ديفي ويوجد فيه العديد من الايقونات

content: ‘\24’; ترمز للصورة المحتارة السهم ( اخر المقال سوف نخبرك اين تجد الايقونات وكيف تختار منها )

margin-right: 10px; margin-left: -10px; مثل ما كنتم شايفين السهم داخل على الكلام بتغير الارقام تستطيع التحكم بمكان الايقونه

color: #2cba6c; لون الايقونة تغيرة من هنا

 

اضافة ايقونه الى قائمة جميع القوائم الفرعية :

الخطوة الاولى انسخ رمز الايقونه :

اختر الايقونه المناسبة من قائمة ايقونات ET يرجى ملاحظة ان الرمز لليقونة المختارة () سوف نقوم بنسخ بعد حرف ال x مع الارقام فقط مثل (e009)

قائمة ايقونات ET

الخطوة الثانية نسخ الكود الى CSS الخاص في القالب

نذهب الى DIVI >اعدادات السمة > CSS الخاص بعدها نقوم بلصق الكود التالي 

   
/*اضافة ايقونه الى قائمة الفرعية */
.nav li li a:before {
    font-family: 'ETMODULES';
    content: '\24';
    text-align: center;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: -10px;
    color: #2cba6c;
    font-size: 1em;
    transition: all .3s ease;
}

 

ايقونة القائمة الفرعية

الخطوة الثالثة تعديل الايقونة في الكود

قمنا بختيار ايقونه رمزها (&) نقو بختيار الذي بعد x  (26) نقوم بتعديل الكود

content: ‘\24’; قبل

content: ‘\26’ بعد فقط غيرنا الرمز السابق

الخطوة الرابعة التعديل على الكود

بامكانك التعديل على الكود بما يناسبك

شرح الكود :

font-family: ‘ETMODULES’;  نوع الخط و الخط المستخدم من ديفي ويوجد فيه العديد من الايقونات

content: ‘\24’; ترمز للصورة المحتارة السهم ( اخر المقال سوف نخبرك اين تجد الايقونات وكيف تختار منها )

margin-right: 10px; margin-left: -10px; مثل ما كنتم شايفين السهم داخل على الكلام بتغير الارقام تستطيع التحكم بمكان الايقونة

color: #2cba6c; لون الايقونة تغيرة من هنا

 

اضافة ايقونة خاصة مع اسم الصفحة في قالب DIVI

صور الايقونة مع اسم الصفحة

صورة رقم واحد تبين الصورة مع اسم الصفحة

الخطوة الاولى انسخ رمز الايقونه :

اختر الايقونة المناسبة من قائمة ايقونات ET يرجى ملاحظة ان الرمز لليقونة المختارة () سوف نقوم بنسخ بعد حرف ال x مع الارقام فقط مثل (e009)

قائمة ايقونات ET

الخطوة الثانية نسخ الكود الى CSS الخاص في القالب

نذهب الى DIVI >اعدادات السمة > CSS الخاص بعدها نقوم بلصق الكود التالي 

/*-----------------ايقونة الى قائمة  مع النص ---------------- */
.menu-home a:before {
    font-family: 'ETmodules';
    content: "\e009";
    margin-right: 10px;
    margin-top: -0px;
    color: #c12659;
    font-size: 22px;
    float: right;
}

الخطوة الثالثة تعديل الايقونة في الكود

قمنا بختيار ايقونة رمزها (') نقو بختيار الذي بعد x  (27) نقوم بتعديل الكود

content: ‘\24’; قبل

content: ‘\27’ بعد فقط غيرنا الرمز السابق

الخطوة الرابعة التعديل على الكود

شرح الكود :

font-family: ‘ETMODULES’;  نوع الخط و الخط المستخدم من ديفي ويوجد فيه العديد من الايقونات

content: ‘\24’; ترمز للصورة المحتارة السهم ( اخر المقال سوف نخبرك اين تجد الايقونات وكيف تختار منها )

margin-right: 10px; margin-left: -10px; مثل ما كنتم شايفين السهم داخل على الكلام بتغير الارقام تستطيع التحكم بمكان الايقونة

color: #2cba6c; لون الايقونة تغيرة من هنا

float: right; اتجاة الصورة

اضافة ايقونة خاصة لكل رابط في قالب DIVI

صور ايقونة الى قائمة بدل اسم الصفحة

صورة رقم 2 تبين الصورة بدون اسم الصفحة

الخطوة الاولى انسخ رمز الايقونه :

اختر الايقونه المناسبة من   قائمة ايقونات ET

ايقونة الى قائمة ET

الخطوة الثانية اضافة الرمز الى النص في القائمة  ( ايقونه الى قائمة):

نذهب الى المظهر ثم قوائم. سوف يتحول الرمز الى مربع بعد الحفظ الضفحة

اضافة رمز الايقونة

 

الخطوة الثالثة اضافة عنوان كلاس css الى القائمة

اذا لم يظهر لك CSS Classes اعلى الصفحة تجد خيارات الشاشة اختر CSS Classes

اضافة كلاس css ايقونة الى قائمة

الخطوة الرابعة اضافة كود CSS القالب ( ايقونه الى قائمة)

نقوم بنسخ الكود التالي بالاسفل ثم

نذهب الى DIVI >اعدادات السمة > CSS الخاص بعدها نقوم بلصق الكود التالي 

 

/*—————–ايقونه الى قائمة  لتبديل النص —————- */

.menu-youtube a {
font-family: ‘ETmodules’;
font-size: 24px!important;
color: #c12659!important;
}
.menu-youtube a:hover {
color: #8dc63f!important;
}


شرح الكود :

font-family: ‘ETMODULES’;  نوع الخط و الخط المستخدم من ديفي ويوجد فيه العديد من الايقونات

font-size: 24px!important;  حجم الخط

color: #2cba6c; لون الايقونة تغيرة من هنا

اشترك في القائمة البريدية واحصل على كتاب

ادوات تحتاجها لبناء موقعك الاكتروني

اشترك في القائمة البريدية واحصل على كتاب

ادوات تحتاجها لبناء موقعك الاكتروني

لقد تم اشتراكك في القائمة قم بتفعيل اشتراكك للحصول على الكتاب

Share This
%d مدونون معجبون بهذه: