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

[ حصريا ] شرح استخدام ايقونات FontAwesome مع ال XenForo 2

shqawe

ربي أشرح لي صدري
27 يونيو 2019
3,164
23
2,073
113
K.S.A
بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

احببت ان اقدم في هذا الدرس الطريقة الصحيحة لاستخدام ايقونات او خطوط FontAwesome مع منتديات الزين فورو.

حيث اني رأيت الكثير يستخدمها بالطريقة الاعتيادية وهي وضع هذا الكود في قوالب HTML


HTML:
<i class="fal fa-home" aria-hidden="true"></i>

او يستخدم الاكواد داخل قوالب css بهذه الطريقة

CSS:
content: '\f508';
font-family: 'Font Awesome 5 Pro';

الطريقتين تعمل بدون مشاكل ولكن احيانا ً الاكواد داخل قوالب css لا تعمل بشكل مميز لذا قررت اليوم ان اقوم بطرح الطريقة المناسبة التي وفرتها بيئة الزين فورو في الجيل الثاني

حيث تم توفير وسم HTML خاص بايقونات FontAwesome وهو كالتالي:


HTML:
<xf:fa icon="fa-home"  />

يكفي ان تذهب الى الموقع الرسمي للايقونات وتختار اسم الايقونة التي تريد وتضعه بدلاً من كلمة home في الكود السابق وسوف تتكفل بيئة الزين فورو بتهيئة الكود وطباعة بالشكل المطلوب

اما اذا اردت ان تستخدمه داخل قوالب css فالزين فورو ايضا ً وفرت دالتين تستطيع استخدامها في داخل القوالب بكل سهولة

الدالة الاولى


CSS:
.m-faBase('Pro');

وهذه الدالة نضع فيها نوع الخط حيث ان خطوط ال FontAweome تأتي بثلاثة خطوط Pro,Brand,Solid

الدالة الثانية


CSS:
m-faContent(@fa-var-home);

وهذه الدالة نضع فيها اسم الايقونة بعد كلمة var اي بالضبط نستبدل كلمة home باسم الايقونة التي نريد وبهذه السطرين فقط تقوم الزين فورو بترجمة الكود الى ايقونات FontAwesome بالطريقة الصحيحة


ايضا ً هناك خمس اشكال تستطيع اضافتها الى الايقونات في قوالب html وهذا شرح بسيط في هذا الجدول لطريقة الاستخدام :


اسم الاستايلالرمز المختصرالاستخدام في قوالب Htmlحجم الخط font weight
Solidfas<xf:fa icon="fas fa-home" />900
Regularfar<xf:fa icon="far fa-home" />400
Lightfal<xf:fa icon="fal fa-home" />300
Duotonefad<xf:fa icon="fad fa-home" />900
Brandsfab<xf:fa icon="fad fa-home" />400


قد يسأل بعضكم لماذا اقوم باستخدام هذه الطريقة ما دام بامكاني ان استخدم الطريقة الافتراضية؟

الجواب هو الذي رأيناه في بعض الاستايلات مثل استايل اخونا ابو كريم الاصدار الثاني مثلا ً فقد استخدم فيه الطريقة الافتراضية للاكواد ولم يقم باستخدام دوال الزين فورو مما سبب تعارض حيث ان النسخ القديمة من الزين فورو كانت تستخدم خطوط FontAwesome النسخة رقم 4 بينما في التحديثات الاخيرة للزين فورو استخدمو النسخة الخامسة لخطوط FontAwesome وقامو بتحديث الدوال فقط

لذا لو كنت تستخدم الدوال فمهما حصل من تغييرات فسوف يتم التحديث في الخلفية دون المساس بكودك

هذا ما اردت توضيحه واتمنى ان تكون الفكرة قد وصلت ويكون الشرح بسيط وواضح وسعل

في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لا يخطأ


احترامي وتقديري
اخوكم
شقاوي
 
التعديل الأخير بواسطة المشرف:
وإياك حبيبي محمد وكل من مر على الموضوع

وان شاء الله يكون الشرح مفهوم وواصل للجميع يارب 🙏

احترامي وتقديري
اخوك
شقاوي
 
الله يعافيك تغاريد والعفو يالغالية ما سوينا شيء

احترامي وتقديري
اخوك
شقاوي
 
تسلم يدك أخي الحبيب شقاوي
شرح رائع ومفيد جدا وهام لكل المصممين أو حتى المبتدئين
بارك الله فيك يالغالي
تحياتي لك
 
بآرك الله فيك

مجهود وآضح تشكر عليه وشرح وآفي وكافي


تحيآتي
 
حياكم الله اخواني نورتم الموضوع

احترامي وتقديري
اخوكم
شقاوي
 
أشكرك أخي الحبيب ، إستفساري هو كيف أضع الأيقونة داخل الموضوع ؟
كمثال : أريد أيقونة واتس أب بجوار رقم جوال .
كيف ممكن ؟مع العلم أنها كانت متاحة بالجيل الاول من خلال إضافة
 
أشكرك أخي الحبيب ، إستفساري هو كيف أضع الأيقونة داخل الموضوع ؟
كمثال : أريد أيقونة واتس أب بجوار رقم جوال .
كيف ممكن ؟مع العلم أنها كانت متاحة بالجيل الاول من خلال إضافة

فضلا ضع مثال لما تريده لتتضح الفكرة أكثر
 
أشكرك أخي الحبيب ، إستفساري هو كيف أضع الأيقونة داخل الموضوع ؟
كمثال : أريد أيقونة واتس أب بجوار رقم جوال .
كيف ممكن ؟مع العلم أنها كانت متاحة بالجيل الاول من خلال إضافة

العفو يالغالي

بالنسبة لاستفسارك ياليت توضيح مثل ما تفضل اخوي محمد او ضع لنا مثال

بارك الله فيك أخي
بارك الله فيك اخوي تركي ..

اخوي وسيم وبشير والله يبارك فيكم ويجزاني واياكم الخير

تقبلوا احترامي وتقديري
اخوكم
شقاوي
 
فضلا ضع مثال لما تريده لتتضح الفكرة أكثر

المثال بإختصار انه كان يوجدفي الجيل الاول إضافة لأدراج أيفونت داخل الموضوع عند الكتابة ..

مثلا حاليا أريدأكتب للإتصال على الرقم و أضع <xf:fa icon="fa-home" />

المفروض يظهر لي الفونت المطلوب !

أوكيف يمكن لاأعلم ؟

أتمني تكون الرسالة واضحة ؟
 
المثال بإختصار انه كان يوجدفي الجيل الاول إضافة لأدراج أيفونت داخل الموضوع عند الكتابة ..

مثلا حاليا أريدأكتب للإتصال على الرقم و أضع <xf:fa icon="fa-home" />

المفروض يظهر لي الفونت المطلوب !

أوكيف يمكن لاأعلم ؟

أتمني تكون الرسالة واضحة ؟

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

مثلا حاليا أريدأكتب للإتصال على الرقم و أضع <xf:fa icon="fa-home" />

المفروض يظهر لي الفونت المطلوب !

أوكيف يمكن لاأعلم ؟

أتمني تكون الرسالة واضحة ؟

يالغالي بالامكان الاستعانة بحقول الموضوع المخصصة ووضع حقل خاص برقم الجوال ومن ثم وضع ايقونة خاصة لهذا الحقل
 
يالغالي بالامكان الاستعانة بحقول الموضوع المخصصة ووضع حقل خاص برقم الجوال ومن ثم وضع ايقونة خاصة لهذا الحقل
هو يقصد أن تكون داخل الموضوع نفسه أخي شقاوي
يعني مثلا أنت قمت بكتابة درس عن مواقع التواصل الإجتماعي
وبتقول مثلا
وإذا أردنا أن نمتلك حساب في موقع فيسبوك يمكننا الدخول إلى الرابط التالي
يريد هو بعد كلمة فيسبوك أن يضع أيقونة الفيسبوك الموجودة ضمن أيقونات FontAwesome عن طريق الكود الخاص بها
 
يعيطك العافية استاذ شقاوي
نفترض انه مكتوب لدي في قالب extra
هكذا
&[data-nav-id="home"]{&:before{content: "\f015";}}
كيف يمكن تغيرها بالطريقة الصحيحة هكذا مثلا
.p-navEl a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
 
التعديل الأخير:
حياك يالغالي راح تكون الطريقة الصحيحة بهذه الطريقة

HTML:
.p-navEl a{
    
        &[data-nav-id='home']:before{
            .m-faBase('Pro');
            .m-faContent(@fa-var-home);
        }
}

واذا حبيت تضيف اكثر من ايقونة راح يكون بهذه الطريقة


HTML:
.p-navEl a{
    
        &[data-nav-id='home']:before{
            .m-faBase('Pro');
            .m-faContent(@fa-var-home);
        }
        &[data-nav-id='forums']:before{
            .m-faBase('Pro');
            .m-faContent(@fa-var-comments);
        }
        &[data-nav-id='whatsNew']:before{
            .m-faBase('Pro');
            .m-faContent(@fa-var-question);
        }
        &[data-nav-id='members']:before{
            .m-faBase('Pro');
            .m-faContent(@fa-var-users);
        }
}
 

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

المواضيع
1,451
المشاركات
16,647
الأعضاء
1,027
آخر عضو مسجل
dedowbas
أعلى