السلام عليكم ورحمه الله وبركاته
1- في البداية لا بد من تحميل الملفات من موقع الخطوط من هنا http://fontawesome.io/
2- بعد الدخول للموقع نقوم بالضغط على كلمة download كما بالصورة>
3. بعد التحميل ستجده ملف مضغوط على هذا الشكل
قم بفك الضغط ستجد هذا المجلدات مايهمنا هو مجلد واحد اسمه fonts كما هو موضح بالصورة
4. قم الان برفع مجلد fonts فقط المجلد الرئيسي للمنتدى داخل مجلد اسمه styles باستخدام برنامج الــ FTP حتى يكون على هذا المسار styles >>>>>>>> default >>>>>>> xenforo >>>>>> fonts
كما بالصوره
5. من خلال لوحة التحكم افتح المظهر ... ثم التمبلت
6. قم بايجاد التمبلت node_list.css
7. قم بحذف الكود التالي
كود:
.node .forumNodeInfo .nodeIcon,
.node .categoryForumNodeInfo .nodeIcon
{
@property "nodeIconForum";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: 0 0;
@property "/nodeIconForum";
}
.node .forumNodeInfo.unread .nodeIcon,
.node .categoryForumNodeInfo.unread .nodeIcon
{
@property "nodeIconForumUnread";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -36px 0;
@property "/nodeIconForumUnread";
}
.node .pageNodeInfo .nodeIcon
{
@property "nodeIconPage";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -72px 0;
@property "/nodeIconPage";
}
.node .linkNodeInfo .nodeIcon
{
@property "nodeIconLink";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -108px 0;
@property "/nodeIconLink";
}
7. قم بفتح التمبلت Extra.css ثم اضف الكود التالي:
كود:
/* FONT AWESOME NODE ICONS */
@font-face
{
font-family: 'FontAwesome';
src: url('./styles/default/xenforo/fonts/fontawesome-webfont.eot');
src: url('./styles/default/xenforo/fonts/fontawesome-webfont.ttf') format("truetype"),
url('./styles/default/xenforo/fonts/fontawesome-webfont.woff') format('woff'),
url('./styles/default/xenforo/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('./styles/default/xenforo/fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
font-style: normal;
font-weight: normal;
}
.node.node_51 .forumNodeInfo .nodeIcon:after, .node.node_51 .categoryForumNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}
.node.node_51 .forumNodeInfo.unread .nodeIcon:after, .node.node_51 .categoryForumNodeInfo.unread .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}
/* FONT AWESOME NODE ICONS */
8. استبدل الرقم 51 بالــ ID الخاص بالقسم المراد تغغير الايقونة الخاصة بها.
9. تستطيع تغيير شكل ولون وحجم الايقونة بالطريقة التي تريدها
10. للحصول على رموز الايقونات المراد تغييرها من خلال موقع Font Awesome
بعد الدخول للرابط ستجد الايقونات ورموزها وهي تتحدث باستمرار
اذا كنت تريد اعطاء الاقسام ايقونة واحدة فإنك تستطيع اختصار الطريقة من خلال وضع الكود التالي في تمبلت Extra.css بدلا من الكود السابق
كود:
.node .forumNodeInfo .nodeIcon:after, .node .categoryForumNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}
.node .forumNodeInfo.unread .nodeIcon:after, .node .categoryForumNodeInfo.unread .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}
الكود يختصر العملية وبالتالي لا حاجة لوضع الــ ID الخاص بكل منتدى وتستطيع تغيير الحجم والشكل بالطريقة التي تراها مناسبة.
وأخيرا ان كنت ترغب بتغيير اللون اضف الكود للايقونة التي تريدها وقم بتغيير ارقام اللون:
في المثال اللون هو اللون الأسود