• أعضاء وزوار معهد زين العربية، نود أن نعلمكم أن المعهد سيشهد في الفترة القادمة الكثير من التغيرات سواءا على المستوى الاداري او مستوى الاقسام، لذا نرجو منكم التعاون، وأي ملاحظات او استفسارات يرجى التواصل معنا عبر قسم الشكاوي و الإقتراحات و الطلبات ونشكركم على حسن تفهمكم وتعاونكم ،مع خالص الشكر والتقدير والاحترام من إدارة زين العربية.

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

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
23 يناير 2019
5,315
41
3,346
113
زين العربية
xenarabia.com
بسم الله الرحمان الرحيم
زوار و أعضاء زين فورو العربية 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-
 
التعديل الأخير:

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

المواضيع
1,513
المشاركات
17,223
الأعضاء
1,072
آخر عضو مسجل
usimaweeb
أعلى