طريقة إضافة ايقونات للنافبار الزين فورو 2

[abdo.chenwi]

السلام عليكم ورحمه الله وبركاته

الموضوع بسيط ياشباب لكل ما ستفعله هو جعل النافبار اللى من غير ايقونات بايقونات مكتبة الخطوط ممايزيد رونق للمنتداك
[اسم الموضوع]: طريقة إضافة ايقونات للنافبار الزين فورو 2
[توافق الشرح]: الجيل الثانى او النسهة الثانية او XF2.0

قبل البدء شاهد النافبار قبل التعديل عليه







رابط للمعاينة :https://www.adm-sat.com/forums/


الخطوات
1- سجل دخول الى لوحة تحكم المنتدى
2- توجه الى المظهر >> ثم البحث فى القوالب كما بالصورة.





3- اكتب فى خانة العنوان اسم القالب اكتب اسم القالب المراد التعديل عليه وهو extra.less كما بالصورة.





4- يظهر الان امامنا اسم القالب وهو extra.less اضغط عليه كما بالصورة.

.p-navEl-link{                             
       &:before{padding-right:5px;font-family: FontAwesome;content: "\f29c";}             
    &[data-nav-id="home"]{&:before{content: "\f015";}}
    &[data-nav-id="forums"]{&:before{content: '\f0e6';}}
    &[data-nav-id="whatsNew"]{&:before{content: '\f128';}}
    &[data-nav-id="members"]{&:before{content: '\f0c0';}}
    &[data-nav-id="xfrm"]{&:before{content: '\f019';}}
    &[data-nav-id="xfmg"]{&:before{content: '\f030';}}
    &[data-nav-id="newPosts"]{&:before{content: '\f06d';}}
    &[data-nav-id="findThreads"]{&:before{content: '\f00e';}}
    &[data-nav-id="searchForums"]{&:before{content: '\f002';}}
    &[data-nav-id="markForumsRead"]{&:before{content: '\f070';}}
    &[data-nav-id="whatsNewPosts"]{&:before{content: '\f0f6';}}
    &[data-nav-id="xfrmNewResources"]{&:before{content: '\f019';}}
    &[data-nav-id="whatsNewProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="whatsNewNewsFeed"]{&:before{content: '\f09e';}}
    &[data-nav-id="latestActivity"]{&:before{content: '\f005';}}
    &[data-nav-id="xfrmLatestReviews"]{&:before{content: '\f091';}}
    &[data-nav-id="xfrmYourResources"]{&:before{content: '\f0ed';}}
    &[data-nav-id="xfrmWatched"]{&:before{content: '\f0a7';}}
    &[data-nav-id="xfrmSearchResources"]{&:before{content: '\f002';}}
    &[data-nav-id="currentVisitors"]{&:before{content: '\f234';}}
    &[data-nav-id="newProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="searchProfilePosts"]{&:before{content: '\f21b';}}
}

6- النتيجة.

انتهى

مسموح نقل الموضوع لكن بذكر المصدر اخواني


المصدر: شرح طريقة إضافة ايقونات للنافبار الزين فورو 2

[abdou_7]

السلام عليكم

شكرا على الشرح يا آخي ... بصراحة لست من هواة تطوير المنتديات و لم أجرب الطريقة و لكن واضح أن الآيقونات المستعملة هي أيقونات font-awesome

لذلك أريد أن أقدم إضاقة بسيطة على شرحك .. على سبيل المثال نأخذ هذا السطر :

&[data-nav-id="newPosts"]{&:before{content: '\f06d';}}

ماهو ملون باللون الأحمر \f06d هو كود الأيقونة في قائمة ايقونات font-awesome و يمكنك تغييره إلى أيقونة أخرى ليكون منتداك متميز لك

ماهو ملون باللون الأزرق هي وظيفة الأيقونة

الأن هذه قائمة الأيقونات و كل واحدة موضح أمامها الكود الخاص بها


https://astronautweb.co/snippet/font-awesome/


وشكرا

[ktkc]

شكرااااااا لك