shqawe
ربي أشرح لي صدري
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
احببت ان اقدم في هذا الدرس الطريقة الصحيحة لاستخدام ايقونات او خطوط 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 |
| 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 وقامو بتحديث الدوال فقط
لذا لو كنت تستخدم الدوال فمهما حصل من تغييرات فسوف يتم التحديث في الخلفية دون المساس بكودك
هذا ما اردت توضيحه واتمنى ان تكون الفكرة قد وصلت ويكون الشرح بسيط وواضح وسعل
في النهاية ان اصبت فهذا من فضل الله علي وان اخطأت فجل من لا يخطأ
احترامي وتقديري
اخوكم
شقاوي
اخوكم
شقاوي
التعديل الأخير بواسطة المشرف: