مساحة اعلانية



ركن شروحات الزين فورو XENFORO هذا القسم خاص بكل شروحات إستخدام XENFORO وتعديلات القوالب
احصائياتى

الردود
5

المشاهدات
446
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud ofهيلبرنت has much to be proud of

  • هيلبرنت غير متواجد حالياً

المشاركات
4,940

+التقييم
274

تاريخ التسجيل
Jul 2015

الاقامة
فى الدنيا

نظام التشغيل
windows 8

رقم العضوية
18
08-06-2016, 11:42 PM
المشاركة 1
08-06-2016, 11:42 PM
المشاركة 1
افتراضي طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
السلام عليكم ورحمه الله وبركاته
1- في البداية لا بد من تحميل الملفات من موقع الخطوط من هنا http://fontawesome.io/
2- بعد الدخول للموقع نقوم بالضغط على كلمة download كما بالصورة>

طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo

3. بعد التحميل ستجده ملف مضغوط على هذا الشكل

طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo

قم بفك الضغط ستجد هذا المجلدات مايهمنا هو مجلد واحد اسمه fonts كما هو موضح بالصورة

طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo

4. قم الان برفع مجلد fonts فقط المجلد الرئيسي للمنتدى داخل مجلد اسمه styles باستخدام برنامج الــ FTP حتى يكون على هذا المسار styles >>>>>>>> default >>>>>>> xenforo >>>>>> fonts
كما بالصوره
طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo

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

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

التعديل الأخير تم بواسطة abo-karim ; 12-28-2016 الساعة 08:41 PM سبب آخر: تم تحدبث الموضوع من خلال اضافة صور وجمل لتسهيل الموضوع على القارىْ
قديم 12-28-2016, 08:42 PM
المشاركة 2
abo-karim
.:: Administrator ::.
تاريخ الإنضمام : Jun 2015
رقم العضوية : 1
المشاركات: 1,435
  • abo-karim غير متواجد حالياً
افتراضي رد: طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
تم اعادة نباء صياغه الموضوع بشكل حصرى مع اضافة صور توضيحة بالشرح

نشكر الاخ هيلبرنت علشرح

قديم 06-29-2017, 04:29 PM
المشاركة 3
غاوى مشاكل
.:: عضو فعال ::.
تاريخ الإنضمام : Sep 2016
رقم العضوية : 1057
المشاركات: 193
  • غاوى مشاكل غير متواجد حالياً
افتراضي رد: طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
درس فعلا حصرى

مشاااااااء الله 10/10

قديم 07-20-2017, 03:39 PM
المشاركة 4
عابر سبيل
.:: عضو فعال ::.
تاريخ الإنضمام : Jul 2017
رقم العضوية : 1365
المشاركات: 152
  • عابر سبيل غير متواجد حالياً
افتراضي رد: طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
بارك الله فيكم

قديم 09-15-2017, 11:22 PM
المشاركة 5
14SAT
.:: عضو مشارك ::.
تاريخ الإنضمام : Nov 2016
رقم العضوية : 1172
المشاركات: 33
  • 14SAT غير متواجد حالياً
افتراضي رد: طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
شكرا على الشرح لكم لم تظهري معي الايقونات

قديم 09-21-2017, 05:27 PM
المشاركة 6
14SAT
.:: عضو مشارك ::.
تاريخ الإنضمام : Nov 2016
رقم العضوية : 1172
المشاركات: 33
  • 14SAT غير متواجد حالياً
افتراضي رد: طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
اين انت اخي انا بنتظار مساعدتك

اضافة رد

العلامات المرجعية

طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo


أدوات الموضوع

الانتقال السريع

المواضيع المتشابهه للموضوع: طريقة اضافة مكتبة الخطوط Font Awesome لمنتديات الزين فورو - xenforo
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
شرح اضافة ايقونة تظهر بجانب اسم موقعك بالمتصفح لمنتديات الزين فورو -Xenforo هيلبرنت ركن شروحات الزين فورو XENFORO 2 11-30-2016 09:56 PM
طلب صندوق التحرير بأزرار من مكتبة Font Awesome HICHEM-27 ركن مشاكل وطلبات المنتديات 2 08-08-2016 05:30 PM
الرجوع للاعلى باستخدام مكتبة Font-Awesome safwan khazraji ركن تطوير منتديات vb3.8.0 0 03-30-2016 10:21 PM
تغيير رتب الاعضاء بمختصرات مكتبة Font Awesome safwan khazraji ركن تطوير منتديات vb3.8.0 2 02-22-2016 10:06 PM
شرح لكيفية إستخدام تلميحات Tooltip مع مكتبة Font Awesome هيلبرنت ركن تطوير منتديات vb3.8.0 4 01-19-2016 12:28 PM





الساعة الآن 06:52 PM