الحالة
مغلق و غير مفتوح للمزيد من الردود.

SUPPORT

طاقم الإدارة

2017 - 9 - 29
144
65
27
Saudi Arab
hr7xx.net
علم الدولة
تحديث | إضافة ايقونات Font Awesome لقطع الشريط الجانبي عبر CSS فقط
قام SUPPORT بتقديم منتج جديد:

إضافة ايقونات Font Awesome لقطع الشريط الجانبي عبر CSS فقط - إضافة ايقونات Font Awesome لقطع الشريط الجانبي

السلام عليكم
التطبيق حصري، بسيط و سهل و يمكن تغييره وتعديله في أي وقت و بسهولة
سيتم تحديث الكود تباعاً



نضف مايلي في قالب extra.less فقط

Less:
/* FA Sidebar */
.block-minorHeader:before,
form[data-xf-init] .block-minorHeader:before{
    .m-faBase();
    display: inline-block;
    content: '\f009';
    padding-right: @xf-paddingMedium;
}
.block[data-widget-definition="members_online"] .block-minorHeader:before {content...
قراءة المزيد حول هذا المنتج...
 

Alrajabane

^_^
طاقم الإدارة
وّأِحُدّ مًنُ أٌلِنُأًسُ

2016 - 8 - 7
2,778
270
1,795
السعودية
hr7xx.net
علم الدولة
تحديث | إضافة ايقونات Font Awesome لقطع الشريط الجانبي عبر CSS فقط
تحديث للقالب :

CSS:
[data-widget-section="staffMembers"] h3.block-minorHeader:before { /* Staff online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-user-tie);
}
[data-widget-section="onlineNow"] h3.block-minorHeader:before { /* Members online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-users);
}
[data-widget-key="forum_overview_new_posts"] h3.block-minorHeader:before { /* Latest posts */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-comments);
}
[data-widget-key="xfrm_forum_overview_new_resources"] h3.block-minorHeader:before { /* Latest resources */
    display: inline-block;
    .m-faBase();
    .m-faContent(@fa-var-download);
}
[data-widget-key="forum_overview_forum_statistics"] h3.block-minorHeader:before { /* Forum statistics */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-chart-bar);
}
[data-widget-key="xfmg_media_slider"] h3.block-minorHeader:before { /* Random media */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-image);
}
[data-widget-key="forum_overview_share_page"] h3.block-minorHeader:before { /* Share this page */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-share-alt);
}
هل تريد إضافة أيقونة إلى كتلة شريط جانبي مختلفة؟

استخدم هذا الرمز كمثال وقم بتحريره قليلاً:


HTML:
<div class="block">
    <div class="block-container">
        <h3 class="block-minorHeader"><i class="far fa-cog"></i> My Widget</h3>
        <div class="block-body block-row">
          *** content ***
        </div>
    </div>
</div>
عدّل مفتاح عنصر واجهة المستخدم وقم بتغيير اسم أيقونة Font Awesome (يمكنك العثور عليه هنا). ربما ستحتاج إلى ضبط أو إزالة الحشوة اليمنى.

padding-right

ماذا عن HTML الحاجيات؟

لا تحتوي عناصر واجهة تعامل HTML على معرفات أو مفاتيح خاصة بها يمكنك استخدامها بسهولة ، لذلك أوصيك بلصق الرمز أدناه في قالب عنصر واجهة تعامل HTML وتعديل ما هو باللون الأحمر:


HTML:
<div class="block">
    <div class="block-container">
        <h3 class="block-minorHeader"><i class="far fa-[COLOR=rgb(184, 49, 47)]cog[/COLOR]"></i> [COLOR=rgb(184, 49, 47)]My Widget[/COLOR]</h3>
        <div class="block-body block-row">
          *** [COLOR=rgb(184, 49, 47)]content[/COLOR] ***
        </div>
    </div>
</div>
... ثم تحقق من كتلة الوضع المتقدم:

1.png

... وانقر فوق حفظ.
 
الحالة
مغلق و غير مفتوح للمزيد من الردود.
أعلى