Off Canvas icons

swiftyste · Apr 20, 2020

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

Russ · Apr 20, 2020

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";
}

swiftyste · Apr 20, 2020

Russ said:
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

Russ · Apr 20, 2020

Did you edit BOTH nav ID's?

swiftyste · Apr 20, 2020

Russ said:
Did you edit BOTH nav ID's?

Yes worked with side nav but not with off Canvas

Russ · Apr 20, 2020

Can you post the CSS you're using? You may need to use an important! tag on it potentially.

swiftyste · Apr 20, 2020

Russ said:
Can you post the CSS you're using? You may need to use an important! tag on it potentially.

Tried all sorts of css but nothing has changed default icons for off Canvas

Russ · Apr 20, 2020

I'll need to see the CSS you're trying. In viewing your site but need to check the CSS as well.

Davey · Apr 21, 2020

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

swiftyste · Apr 21, 2020

Russ said:
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"); }

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

Russ · Apr 22, 2020

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.

swiftyste · Apr 22, 2020

Russ said:
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 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

Russ · Apr 22, 2020

Are you still seeing a couch? I'm not seeing a couch at all

This will let you set the icon for XFRM

Code:

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

swiftyste · Apr 22, 2020

Russ said:
Are you still seeing a couch? I'm not seeing a couch at all

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 ?

Russ · Apr 22, 2020

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.

swiftyste · Apr 23, 2020

Russ said:
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

I'm very fussy ? but let's hope all your hard work pays off not to it come to that.

Russ · Apr 23, 2020

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!

swiftyste · Apr 23, 2020

Russ said:
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

WRCwithME · Apr 24, 2020

swiftyste said:
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.

swiftyste said:
I just need to change the icon don't want a couch as an icon

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

Thanks again

swiftyste · Apr 25, 2020

WRCwithME said:
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;
}

That famous sofa ?

CSS:

<i class="fad fa-loveseat"></i>

or /f4cc

who new lol

Off Canvas icons

Support Forums

Documentation

Bug Reports

Ticket Support

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Registered

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Pre-Sale Questions