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

[abdo.chenwi]

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

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

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




https://www.adm-sat.com/forums/attachments/102/
(https://www.adm-sat.com/forums/threads/152/)

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


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

https://www.adm-sat.com/forums/attachments/103/
(https://www.adm-sat.com/forums/threads/152/)


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


https://www.adm-sat.com/forums/attachments/104/
(https://www.adm-sat.com/forums/threads/152/)

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

https://www.adm-sat.com/forums/attachments/105/
(https://www.adm-sat.com/forums/threads/152/)

.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';}}
}



https://www.adm-sat.com/forums/attachments/106/
(https://www.adm-sat.com/forums/threads/152/)



6- النتيجة.


https://www.adm-sat.com/forums/attachments/107/
(https://www.adm-sat.com/forums/threads/152/)

انتهى




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


المصدر: شرح طريقة إضافة ايقونات للنافبار الزين فورو 2 (https://www.adm-sat.com/forums/threads/152/)

[abdou_7]

السلام عليكم

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

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



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



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

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

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


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


وشكرا

[ktkc]

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