XF 2.1 - إضافة أيقونات Fonawesome إلى صفحة حساب العضوية | XenArabia | زين فورو العربية

XF 2.1 إضافة أيقونات Fonawesome إلى صفحة حساب العضوية

XenArabia

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

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

قم بنسخ الكود التالي و ضعه في قالب Extra.less

CSS:
/* أيقونات في صفحة حساب العضوية */
[data-template="account_alerts"], &[data-template="account_reactions"], &[data-template="account_bookmarks"],
&[data-template="account_details"], &[data-template="account_security"], &[data-template="account_privacy"],
&[data-template="account_preferences"], &[data-template="account_signature"], &[data-template="account_upgrades"],
&[data-template="account_connected"], &[data-template="account_following"], &[data-template="account_ignored"] {
    .p-body-sideNavContent a.blockLink {
        &:before {
            .m-faBase();
            padding-right: 5px;
        }
        &[href*="members/"]:before {
            .m-faContent(@fa-var-user);
        }
        &[href*="account/alerts"]:before {
            .m-faContent(@fa-var-bell);
        }
        &[href*="account/reactions"]:before {
            .m-faContent(@fa-var-thumbs-up);
        }
        &[href*="account/bookmarks"]:before {
            .m-faContent(@fa-var-bookmark);
        }
        &[href*="account/account-details"]:before {
            .m-faContent(@fa-var-user-cog);
        }
        &[href*="account/security"]:before {
            .m-faContent(@fa-var-shield-alt);
        }
        &[href*="account/privacy"]:before {
            .m-faContent(@fa-var-lock);
        }
        &[href*="account/preferences"]:before {
            .m-faContent(@fa-var-cogs);
        }
        &[href*="account/signature"]:before {
            .m-faContent(@fa-var-signature);
        }
        &[href*="account/upgrades"]:before {
            .m-faBase('Brands');
            .m-faContent(@fa-var-paypal);
        }
        &[href*="account/connected-accounts"]:before {
            .m-faContent(@fa-var-users-class);
        }
        &[href*="account/following"]:before {
            .m-faContent(@fa-var-user-plus);
        }
        &[href*="account/ignored"]:before {
            .m-faContent(@fa-var-user-minus);
        }
        &[href*="logout"]:before {
            .m-faContent(@fa-var-sign-out);
        }
    }
}
/*****/
وهذه نتيجة الكود

438
ملاحظة : في حالة أردت تغير أيقونات Fontaweseome فقط غير ما بعد الكود : @fa-var-
 
التعديل الأخير:

MesterPerfect

:: الأعضاء ::
إنضم
27 يناير 2019
المشاركات
254
مستوى التفاعل
236
النقاط
43
الإقامة
sohag, Egypt
الموقع الالكتروني
جميل جدا شرح رائع ومفيد
جزاك الله خيرا
 

ِِAraby5050

الحمد لله رب العالمين
إنضم
22 فبراير 2019
المشاركات
66
مستوى التفاعل
64
النقاط
18
الإقامة
مصر
بارك الله فيك اخى

شرح مميز ومجهود رائع سلمت يداك
 

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

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

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