تسجيل الدخول
  1. نود لفت عنايتكم الى أننا لانتحمل أي مسؤولية تجاه المنتجات المنشورة هنا حيث اننا لانقوم بتفحص المنتجات .
    يجب أن تقوم بالتحقق من عمل الاضافه او الاستايل بشكل صحيح قبل إعتمادة على موقعك الرسمي .
    إدارة معهد xenForo العربية

اضافة ايقونات Font Awesome لأقسام المنتديات 1.0.0

استيراد ايقونات خارجية لأقسام المنتديات وتغيير الألوان والأحجام

  1. Sami
    متوافق مع:
    • 1.3
    • 1.4

    سيتم التطرق إلى طريقة اضافة الايقونات المعروفة Font Awesome وادراجها بجانب اقسام المنتديات في الصفحة الرئيسية (المنتديات الرئيسية والفرعية والروابط والصفحات)



    [​IMG]

    الطريقة كالآتي:

    1. في البداية لا بد من تحميل الملفات من موقع Font Awesome, the iconic font and CSS toolkit والتي تم ارفاقها في المتجر (النسخة هنا هي 4.2.0).

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

    [​IMG]

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

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

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

    [​IMG]

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

    [​IMG]

    10. للحصول على رموز الايقونات المراد تغييرها من خلال موقع Font Awesome

    Font Awesome Icons

    بعد الدخول للرابط ستجد الايقونات ورموزها وهي تتحدث باستمرار

    [​IMG]


    [​IMG]

    اذا كنت تريد اعطاء الاقسام ايقونة واحدة فإنك تستطيع اختصار الطريقة من خلال وضع الكود التالي في تمبلت 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;

آخر التعليقات

  1. Turkialawlqy
    Turkialawlqy
    5/5,
    الإصدار: 2014-11-27
    درس مميز ومهم جداً لمصممي الاستايلات
    لكن ما رأيك اذا تم رفع ملفات Font Awesome الى مجلد الاستايلات بدلاً من رفعه الى المجلد الرئيسي للمنتدى ؟
    اعتقد ستكون الامور افضل من ناحية الترتيب ,, وهذا لاينقص من قيمة الموضوع نهائياً
    لك أجمل تحية