swiftyste

Well-Known Member
Where to find Off Canvas icons? or how to set the same icons of side Canvas icons to off Canvas icons

Managed to find side Canvas icons but having little hard time finding off Canvas icons :unsure:
 
I'm looking into a method of making this easier... we'll see how it goes. For now you can use CSS like this to target both:

Code:
.xbSidebar-nav a[data-nav-id='NAVID'] i:before, .offCanvasMenu-linkHolder [data-nav-id="NAVID"]:before {
    content: "\f3f6";
}

Replace NAVID with your custom nav ID. If it's a brand icon, you can do this:

Code:
.xbSidebar-nav a[data-nav-id='steamauth'] i:before, .offCanvasMenu-linkHolder [data-nav-id="steamauth"]:before {
    content: "\f3f6";
    font-family: "Font Awesome 5 Brands";
}
 
I'm looking into a method of making this easier... we'll see how it goes. For now you can use CSS like this to target both:

Code:
.xbSidebar-nav a[data-nav-id='NAVID'] i:before, .offCanvasMenu-linkHolder [data-nav-id="NAVID"]:before {
    content: "\f3f6";
}

Replace NAVID with your custom nav ID. If it's a brand icon, you can do this:

Code:
.xbSidebar-nav a[data-nav-id='steamauth'] i:before, .offCanvasMenu-linkHolder [data-nav-id="steamauth"]:before {
    content: "\f3f6";
    font-family: "Font Awesome 5 Brands";
}
Doesn't seem to work on off Canvas :unsure:
 
I find the best way to accomplish this is
Icon In Off Canvas:
.xbSidebar-nav a[data-nav-id='NAVID'] i:before, .offCanvasMenu-linkHolder [data-nav-id="NAVID"]:before {
    .m-faBase();.m-faContent("\f084");
}
 
I'll need to see the CSS you're trying. In viewing your site but need to check the CSS as well.
I'm currently using the one you have posted

CSS:
.xbSidebar-nav a[data-nav-id='EWRporta'] i:before, .offCanvasMenu-linkHolder [data-nav-id="EWRporta"]:before { .m-faBase();.m-faContent("\f4c9"); }

SmartSelect_20200421-162833_Edge.jpg
SmartSelect_20200421-162916_Edge.jpg

For the icons to work on side nav I'm using: xb_canvas.less

CSS:
a[data-nav-id="EWRporta"] i:before { .m-faContent("\f4c9"); }
 
I'm not seeing any of that CSS load at all, unfortunately.

I mean this would overwrite the home icon:

Code:
#XF.XenBase .offCanvasMenu-content a[data-nav-id="EWRporta"]:before {
    content: "\f4c9" !important;
}

If you want me to try to investigate what's going on with the other CSS I may just need a login, something is not right as it's not showing as I mentioned. Don't submit a login here but if you want to take that route just submit a ticket.
 
I'm not seeing any of that CSS load at all, unfortunately.

I mean this would overwrite the home icon:

Code:
#XF.XenBase .offCanvasMenu-content a[data-nav-id="EWRporta"]:before {
    content: "\f4c9" !important;
}

If you want me to try to investigate what's going on with the other CSS I may just need a login, something is not right as it's not showing as I mentioned. Don't submit a login here but if you want to take that route just submit a ticket.
SmartSelect_20200422-152941_Edge.jpg

I'm happy to say that CSS you given me kicked it into touch & completely works now I just need to change the icon don't want a couch as an icon:ROFLMAO:
 
Are you still seeing a couch? I'm not seeing a couch at all :D

This will let you set the icon for XFRM

Code:
#XF.XenBase .offCanvasMenu-content a[data-nav-id="xfrm"]:before {
    content: "\f013" !important;
}
 
Are you still seeing a couch? I'm not seeing a couch at all :D

This will let you set the icon for XFRM

Code:
#XF.XenBase .offCanvasMenu-content a[data-nav-id="xfrm"]:before {
    content: "\f013" !important;
}
Nope nope its all good now thanks again for your help spent hours trying to get it to work but you saved they day ?

Thanks so much! I got another issue but I make another thread later its even more of a headache ?
 
I'm looking into a method of making this way easier just as a heads up!

That change may come at the price of edits on a future update but I'll make sure it's clear as to what needs to be done.
 
I'm looking into a method of making this way easier just as a heads up!

That change may come at the price of edits on a future update but I'll make sure it's clear as to what needs to be done.
Oh I really hope it doesn't I like to change it very frequently because I'm never happy how it looks :sneaky:

I'm very fussy ? but let's hope all your hard work pays off not to it come to that.
 
Ya, I definitely made a mistake when it came to implementing these icons on the off-canvas menu. I believe CSS like this should work in a future update to where it'll update in the normal horizontal navigation, off-canvas nav, and mobile navigation.

Code:
a[data-nav-id="xa_ams"]:before { .m-faContent("\f15c"); }

Right now it's a bit of a mess and I'm sorry about that!
 
Ya, I definitely made a mistake when it came to implementing these icons on the off-canvas menu. I believe CSS like this should work in a future update to where it'll update in the normal horizontal navigation, off-canvas nav, and mobile navigation.

Code:
a[data-nav-id="xa_ams"]:before { .m-faContent("\f15c"); }

Right now it's a bit of a mess and I'm sorry about that!
You don't need to be sorry :) to make a top style takes a lot of work so there is going to be mistakes! You did really well and there is always work arounds
 
For the icons to work on side nav I'm using: xb_canvas.less
I had this same issue with the off canvas menu. Simply adding the relevant navid and code below to xb_canvas.less worked a treat for me with no additional coding required.

Code:
    a[data-nav-id="NAVID"]i:before { .m-faContent("\f073"); }

Make sure it's "i:before" and not just ":before" else you'll bork the theme look competely.

I just need to change the icon don't want a couch as an icon :D
LOL ironically it was a sofa icon I was looking to add. HAHA!

Thanks again :)
 
Last edited:
I had this same issue with the off canvas menu. Simply adding the relevant navid and code below to xb_canvas.less worked a treat for me with no additional coding required.

Code:
    a[data-nav-id="NAVID"]i:before { .m-faContent("\f073"); }

Make sure it's "i:before" and not just ":before" else you'll bork the theme look competely.


LOL ironically it was a sofa icon I was looking to add. HAHA!

Thanks again :)
No matter what
Code:
    a[data-nav-id="NAVID"]i:before { .m-faContent("\f073"); }
just didn't work no matter how much i throw at it.

But thanks to @Russ by adding little more to it kicked it into touch
CSS:
#XF.XenBase .offCanvasMenu-content a[data-nav-id="xfrm"]:before {
    content: "\f013" !important;
}
:ROFLMAO: That famous sofa ?
CSS:
<i class="fad fa-loveseat"></i>
or /f4cc :D who new lol
 

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.

Back