كيف تضيف ايقونة الى قائمة قالب DIVI
سوف نقوم باضافة ايقونة الى قائمة قالب DIVI سوف يكون الشرح على ثلاث مسارات هي
- اضافة ايقونة الى قائمة جميع روابط القائمة في قالب DIVI
- اضافة ايقونة الى جميع القوائم الفرعية
- اضافة ايقونة خاصة مع اسم الصفحة لكل رابط في قالب DIVI
- اضافة ايقونه خاصه بدل اسم اصفحة في قالب DIVI
لمزيد من المواضيع عن قالب DIVI يرجى زيارة شرح قالب DIVI
اضافة ايقونة الى قائمة جميع روابط قائمة قالب DIVI:
في هذا المثال سوف نقوم باضافة ايقونه الى جميع روابط القائمة الرئيسية مهما كان مكانها. العملية بسيطة سوف ننسخ الكود التلي و نضعه في المكان المخصص ثم سوف نتعلم كيف نتحكم في الكود.
الخطوة الاولى انسخ رمز ايقونه الى قائمة :
اختر الايقونه المناسبة من قائمة ايقونات ET يرجى ملاحظة ان الرمز لليقونة المختارة () سوف نقوم بنسخ بعد حرف ال x مع الارقام فقط مثل (e009)
الخطوة الثانية نسخ الكود الى 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)
الخطوة الثانية نسخ الكود الى 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)
الخطوة الثانية نسخ الكود الى 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
الخطوة الثانية اضافة الرمز الى النص في القائمة ( ايقونه الى قائمة):
نذهب الى المظهر ثم قوائم. سوف يتحول الرمز الى مربع بعد الحفظ الضفحة
الخطوة الثالثة اضافة عنوان كلاس css الى القائمة
اذا لم يظهر لك CSS Classes اعلى الصفحة تجد خيارات الشاشة اختر CSS Classes
الخطوة الرابعة اضافة كود 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; لون الايقونة تغيرة من هنا
