XF 2.2 Mobile offcanvas menu icon before login and register

[siep]

For mobile only I added some icons in the offcanvas menu.
I have found out how to do it for the navigation buttons.

Now I would like to add an icon before "login" and "register" too.
But I can't find out how to do it, since register and login does not have a nav-id.
Can someone help me?

This is the code I use for the navigation buttons:

.offCanvasMenu--nav .js-offCanvasNavTarget a {

    &:before {
        .m-faBase();
        display: inline-block;
        margin-right: 5px;
    }

    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-bolt);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    
}

 

[Old Nick]

You can use .p-navgroup-link.p-navgroup-link--textual .p-navgroup-link--logIn instead i think.

 

[siep]

You can use .p-navgroup-link.p-navgroup-link--textual .p-navgroup-link--logIn instead i think.

Thanks for your reply!
This code adds an icon in the header, but not in the offcanvas menu.

Inspecting shows:

<a href="/community/login/" class="offCanvasMenu-link" data-xf-click="overlay" data-menu-close="true">
                        Log in
                    </a>

 

[Old Nick]

Right, sorry for the misunderstood.
this class .p-offCanvasRegisterLink encompasses the 2 links, register & login maybe you should use it.

.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder. offCanvasMenu-link:first-child {
    /*css code for the login link */
}

.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder. offCanvasMenu-link {
    /*css code for the register link */
}

Not sure but you can try...

 

[siep]

Thanks for your help so far, really appreciate it!
I will try the code tomorrow.

 

[siep]

The code does not work, unfortunately.
However, it is a good basis for me to trial and error with it.
Good for learning the XF-code.

 

[Old Nick]

I made a typo in code and it was not well wrote, i tried this and it works now.

.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder:first-child .offCanvasMenu-link:before {
    content: 'XX';
}

.p-offCanvasRegisterLink>.offCanvasMenu-linkHolder .offCanvasMenu-link:before {
    content: 'X';
}

And this is the result


You can, now, adjust the code with FontAwesome icons.

 

[siep]

Thanks for the help!