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

[shqawe]

بسم الله الرحمن الرحيم

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

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

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

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

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

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

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

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

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

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

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

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

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

.m-faBase('Pro');

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

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

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

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


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

اسم الاستايل	الرمز المختصر	الاستخدام في قوالب Html	حجم الخط font weight
Solid	fas	<xf:fa icon="fas fa-home" />	900
Regular	far	<xf:fa icon="far fa-home" />	400
Light	fal	<xf:fa icon="fal fa-home" />	300
Duotone	fad	<xf:fa icon="fad fa-home" />	900
Brands	fab	<xf:fa icon="fad fa-home" />	400

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

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

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

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

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

احترامي وتقديري
اخوكم
شقاوي​

 

[أبو غَيْث]

جزاك الله خيرا استاذنا الغالي تركي
شرح سلسل و توضيح بالبساطة التي عهدناها منك
سلمت يمناك

 

[shqawe]

وإياك حبيبي محمد وكل من مر على الموضوع

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

احترامي وتقديري
اخوك
شقاوي

 

[تغاريد]

يعطيك العافيه تركي شرح ممتاز

 

[shqawe]

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

احترامي وتقديري
اخوك
شقاوي

 

[MesterPerfect]

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

 

[Azooz]

بآرك الله فيك

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


تحيآتي

 

[shqawe]

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

احترامي وتقديري
اخوكم
شقاوي

 

[ALY]

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

 

[أبو غَيْث]

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

فضلا ضع مثال لما تريده لتتضح الفكرة أكثر

 

[wassimkhemiri]

بارك الله فيك أخي

 

[Alrajabane]

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

 

[shqawe]

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

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

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

بارك الله فيك أخي

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

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

تقبلوا احترامي وتقديري
اخوكم
شقاوي

 

[ALY]

فضلا ضع مثال لما تريده لتتضح الفكرة أكثر

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

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

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

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

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

 

[ahmedkhalifa]

بارك الله فيك ديما مبدع ذادك الله من علمه ونفعه

 

[أبو غَيْث]

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

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

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

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

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

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

 

[shqawe]

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

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

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

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

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

يالغالي بالامكان الاستعانة بحقول الموضوع المخصصة ووضع حقل خاص برقم الجوال ومن ثم وضع ايقونة خاصة لهذا الحقل

 

[MesterPerfect]

يالغالي بالامكان الاستعانة بحقول الموضوع المخصصة ووضع حقل خاص برقم الجوال ومن ثم وضع ايقونة خاصة لهذا الحقل

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

 

[S!L3NT H!LL]

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

 

[shqawe]

حياك يالغالي راح تكون الطريقة الصحيحة بهذه الطريقة

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

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

.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);
        }
}