هيلبرنت

هيلبرنت (http://www.helpernt.com/vb/index.php)
-   قسم تعديلات القوالب والشروحات XENFORO (http://www.helpernt.com/vb/forumdisplay.php?f=94)
-   -   طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo (http://www.helpernt.com/vb/showthread.php?t=4409)

هيلبرنت 08-06-2016 11:42 PM

طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
 
1- في البداية لا بد من تحميل الملفات من موقع
Font Awesome, the iconic font and CSS toolkit .

2. بعد التحميل ستجد المجلدات التالية

3. قم بتحميل المجلدات الى المجلد الرئيسي للمنتدى باستخدام برنامج الــ FTP

4. من خلال لوحة التحكم افتح المظهر ... ثم التمبلت

5. قم بايجاد التمبلت node_list.css

6. قم بحذف الكود التالي
كود:

.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 الخاص بكل منتدى وتستطيع تغيير الحجم والشكل بالطريقة التي تراها مناسبة.

وأخيرا ان كنت ترغب بتغيير اللون اضف الكود للايقونة التي تريدها وقم بتغيير ارقام اللون:
في المثال اللون هو اللون الأسود


كود:

color: #000000;
الشرح تم اقتباسه من موقع معهد xenForo


الساعة الآن 07:25 AM

Powered by vBulletin® Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.