XF 2.1 - إضافة أيقونات fontawesome 5 بالقوائم و كذا قائمة العضوية | XenArabia | زين فورو العربية

XF 2.1 إضافة أيقونات fontawesome 5 بالقوائم و كذا قائمة العضوية

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
807
مستوى التفاعل
813
النقاط
93
العمر
36
الإقامة
المغرب
الموقع الالكتروني
أهلا وسهلا برواد XenArabia .. أقدم لكم درس خفيف يضفي جمالية على منتداك من خلال إضافة أيقونات fontawesome 5 الرائعة إلى قوائم المنتدى و كذا قائمة العضوية ..

هذه صورة قبل التعديل

4

وهذه صورة بعد التعديل

5
كل ما عليك عمله هو إضافة الكود إلى قالب extra.less

CSS:
.p-navEl-link {
    &:before{
        font-size: 15px;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
        .m-faBase();
    }
    &[data-nav-id="home"]:before{content: '\f015';}
    &[data-nav-id="forums"]:before{content: '\f086';}
    &[data-nav-id="whatsNew"]:before{content: '\f0e7';}
    &[data-nav-id="members"]:before{content: '\f007';}
    &[data-nav-id="newPosts"]:before{content: '\f075';}
    &[data-nav-id="findThreads"]:before{content: '\f002';}
    &[data-nav-id="watched"]:before{content: '\f2f1'; }
    &[data-nav-id="searchForums"]:before{content: '\f689';}
    &[data-nav-id="markForumsRead"]:before{content: '\f5b7';}
}
.menu-linkRow{
    &:before{
        display: inline-block;
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
        .m-faBase();
    }
    &[data-nav-id="whatsNewPosts"]:before{content: '\f4ad';}
    &[data-nav-id="whatsNewProfilePosts"]:before{content: '\f4ff';}
    &[data-nav-id="whatsNewNewsFeed"]:before{content: '\f09e';}
    &[data-nav-id="latestActivity"]:before{content: '\f6a3';}
    &[data-nav-id="currentVisitors"]:before{content: '\f0c0';}
    &[data-nav-id="newProfilePosts"]:before{content: '\f4ff';}
    &[data-nav-id="searchProfilePosts"]:before{content: '\f00e';}
    &[data-nav-id="yourThreads"]:before{content: '\f4ad';}
    &[data-nav-id="contributedThreads"]:before{content: '\f4ac';}
    &[data-nav-id="unansweredThreads"]:before{content: '\f4b5';}
    &[data-nav-id="watchedThreads"]:before{content: '\f14e';}
    &[data-nav-id="watchedForums"]:before{content: '\f4ac';}
}
.menu-tabHeader .tabs-tab{
    &:before{
        display: inline-block;
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
        .m-faBase();
    }
    &[href="{{ link('account') }}"]:before{content: '\f509';}
    &[href="{{ link('account/bookmarks') }}"]:before{content: '\f02e';}
}
.menu-content .listPlain .menu-linkRow{
    &:before{
        display: inline-block;
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
        .m-faBase(); 
}
    &[href="{{ link('whats-new/news-feed') }}"]:before{content: '\f09e';}
    &[href*="{{ link('search/member') }}"]:before{content: '\f4b2';}
    &[href*="{{ link('account/reactions') }}"]:before{content: '\f361';}
    &[href="{{ link('account/account-details') }}"]:before{content: '\f4fe';}
    &[href="{{ link('account/security') }}"]:before{content: '\f502';}
    &[href="{{ link('account/privacy') }}"]:before{content: '\f505';}
    &[href="{{ link('account/preferences') }}"]:before{content: '\f6a3';}
    &[href="{{ link('account/signature') }}"]:before{content: '\f5b7';}
    &[href="{{ link('account/following') }}"]:before{content: '\f14e';}
    &[href="{{ link('account/ignored') }}"]:before{content: '\f4fa';}
}
[href*="{{ link('logout') }}"]:before{
        display: inline-block;
        .m-faBase(); 
        content: '\f011';
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px; 
}
ودمتم سالمين :)



 
التعديل الأخير:

عابر سبيل

:: الأعضاء ::
إنضم
28 يناير 2019
المشاركات
73
مستوى التفاعل
58
النقاط
18
الإقامة
تونس
أخي الغالي أريد الكود الخاص بــ
قائمة العضوية
 

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
807
مستوى التفاعل
813
النقاط
93
العمر
36
الإقامة
المغرب
الموقع الالكتروني
أخي الغالي أريد الكود الخاص بــ
قائمة العضوية
تفضل أخي

CSS:
.menu-content .listPlain .menu-linkRow{
    &:before{
        display: inline-block;
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
        .m-faBase();
}
    &[href="{{ link('whats-new/news-feed') }}"]:before{content: '\f09e';}
    &[href*="{{ link('search/member') }}"]:before{content: '\f4b2';}
    &[href*="{{ link('account/reactions') }}"]:before{content: '\f361';}
    &[href="{{ link('account/account-details') }}"]:before{content: '\f4fe';}
    &[href="{{ link('account/security') }}"]:before{content: '\f502';}
    &[href="{{ link('account/privacy') }}"]:before{content: '\f505';}
    &[href="{{ link('account/preferences') }}"]:before{content: '\f6a3';}
    &[href="{{ link('account/signature') }}"]:before{content: '\f5b7';}
    &[href="{{ link('account/following') }}"]:before{content: '\f14e';}
    &[href="{{ link('account/ignored') }}"]:before{content: '\f4fa';}
}
[href*="{{ link('logout') }}"]:before{
        display: inline-block;
        .m-faBase();
        content: '\f011';
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
}
 

عابر سبيل

:: الأعضاء ::
إنضم
28 يناير 2019
المشاركات
73
مستوى التفاعل
58
النقاط
18
الإقامة
تونس
تفضل أخي

CSS:
.menu-content .listPlain .menu-linkRow{
    &:before{
        display: inline-block;
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
        .m-faBase();
}
    &[href="{{ link('whats-new/news-feed') }}"]:before{content: '\f09e';}
    &[href*="{{ link('search/member') }}"]:before{content: '\f4b2';}
    &[href*="{{ link('account/reactions') }}"]:before{content: '\f361';}
    &[href="{{ link('account/account-details') }}"]:before{content: '\f4fe';}
    &[href="{{ link('account/security') }}"]:before{content: '\f502';}
    &[href="{{ link('account/privacy') }}"]:before{content: '\f505';}
    &[href="{{ link('account/preferences') }}"]:before{content: '\f6a3';}
    &[href="{{ link('account/signature') }}"]:before{content: '\f5b7';}
    &[href="{{ link('account/following') }}"]:before{content: '\f14e';}
    &[href="{{ link('account/ignored') }}"]:before{content: '\f4fa';}
}
[href*="{{ link('logout') }}"]:before{
        display: inline-block;
        .m-faBase();
        content: '\f011';
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
}
أحسن الله إليك
 

taboot

:: الأعضاء ::
إنضم
1 فبراير 2019
المشاركات
15
مستوى التفاعل
15
النقاط
3
شكراً لك
ولو أمكن اضافة ايقونات لهذه القائمة
سيكون اجمل وافضل

453
 

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
807
مستوى التفاعل
813
النقاط
93
العمر
36
الإقامة
المغرب
الموقع الالكتروني

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة المنتدى .

إحصائيات المنتدى

المواضيع
360
المشاركات
2,316
الأعضاء
118
آخر عضو مسجل
sameh
أعلى