Eric_ARM

Customer
Hi there,

I have a problem with the navigation icons in FA+ 2.1. When choosing "Inline" they appear and work as expected, when choosing "Above" only a greater-than sign appears where the various icons are supposed to be and it looks like this:

9231


To me it seems like the expected icons are in the source code but they are "overwritten" by the greater-than sign.

Any ideas?
 

Russ

Pixel Exit Staff
This is a bug fixed in our next release. To fix this for now, go to the template: xb_header.less on your PARENT style, yes the one that says DO NOT EDIT :), it's ok to edit it for this specific purpose.

Go down to around line: 385, find this entire section:

Code:
<xf:if is="property('xbNavigationIcons') == 'above' OR property('xbNavigationIcons') == 'inline'">
a[data-nav-id="home"]:before { .m-faContent("\f015"); }
a[data-nav-id="forums"]:before { .m-faContent("\f086"); }
a[data-nav-id="members"]:before { .m-faContent("\f0c0"); }
a[data-nav-id="xfrm"]:before { .m-faContent("\f013"); }
a[data-nav-id="whatsNew"]:before { .m-faContent("\f0e7"); }
a[data-nav-id="EWRrio"]:before { .m-faContent("\f1e8"); }
a[data-nav-id="xfmg"]:before { .m-faContent("\f03d"); }
a[data-nav-id="snog_raffles_navtab"]:before { .m-faContent("\f145"); }
a[data-nav-id="th_donate"]:before { .m-faContent("\f2b5"); }
a[data-nav-id="EWRatendo"]:before { .m-faContent(@fa-var-calendar-alt); }
a[data-nav-id="EWRcarta"]:before { .m-faContent(@fa-var-book); }
a[data-nav-id="EWRdiscord"]:before { .m-faContent(@fa-var-discord); .m-faBase('Brands'); }
a[data-nav-id="EWRmedio"]:before { .m-faContent(@fa-var-video-plus); }
a[data-nav-id="EWRporta"]:before { .m-faContent(@fa-var-home); }
a[data-nav-id="EWRrio"]:before { .m-faContent(@fa-var-play-circle); }
a[data-nav-id="EWRtorneo"]:before { .m-faContent(@fa-var-trophy); }
a[data-nav-id="xa_ams"]:before { .m-faContent("\f15c"); }
a[data-nav-id="xa_ubs"]:before { .m-faContent("\f303"); }
a[data-nav-id="xa_showcase"]:before { .m-faContent("\f00b"); }
a[data-nav-id="xa_sportsbook"]:before { .m-faContent("\f091"); }
a[data-nav-id="xa_pickem"]:before { .m-faContent("\f51e"); }
</xf:if>
<xf:if is="property('xbNavigationIcons') == 'above'">
.p-nav-list .p-navEl
{
    display: flex;
    align-items: center;
}
Replace with:

Code:
<xf:if is="property('xbNavigationIcons') == 'above' OR property('xbNavigationIcons') == 'inline'">
.XenBase .p-pageWrapper
{
    a[data-nav-id="home"]:before { .m-faContent("\f015"); }
    a[data-nav-id="forums"]:before { .m-faContent("\f086"); }
    a[data-nav-id="members"]:before { .m-faContent("\f0c0"); }
    a[data-nav-id="xfrm"]:before { .m-faContent("\f013"); }
    a[data-nav-id="whatsNew"]:before { .m-faContent("\f0e7"); }
    a[data-nav-id="EWRrio"]:before { .m-faContent("\f1e8"); }
    a[data-nav-id="xfmg"]:before { .m-faContent("\f03d"); }
    a[data-nav-id="snog_raffles_navtab"]:before { .m-faContent("\f145"); }
    a[data-nav-id="th_donate"]:before { .m-faContent("\f2b5"); }
    a[data-nav-id="EWRatendo"]:before { .m-faContent(@fa-var-calendar-alt); }
    a[data-nav-id="EWRcarta"]:before { .m-faContent(@fa-var-book); }
    a[data-nav-id="EWRdiscord"]:before { .m-faContent(@fa-var-discord); .m-faBase('Brands'); }
    a[data-nav-id="EWRmedio"]:before { .m-faContent(@fa-var-video-plus); }
    a[data-nav-id="EWRporta"]:before { .m-faContent(@fa-var-home); }
    a[data-nav-id="EWRrio"]:before { .m-faContent(@fa-var-play-circle); }
    a[data-nav-id="EWRtorneo"]:before { .m-faContent(@fa-var-trophy); }
    a[data-nav-id="xa_ams"]:before { .m-faContent("\f15c"); }
    a[data-nav-id="xa_ubs"]:before { .m-faContent("\f303"); }
    a[data-nav-id="xa_showcase"]:before { .m-faContent("\f00b"); }
    a[data-nav-id="xa_sportsbook"]:before { .m-faContent("\f091"); }
    a[data-nav-id="xa_pickem"]:before { .m-faContent("\f51e"); }
}
</xf:if>
<xf:if is="property('xbNavigationIcons') == 'above'">
.p-nav-list .p-navEl
{
    display: flex;
    align-items: center;
}
Should fix it for you. Apologies about that.
 

Eric_ARM

Customer
Hm, seems like the icons only display correctly with this line ~423 commented out:

CSS:
    .m-faContent("\f105");
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.