XF 2.3 Login & register : FA icons

[Old Nick]

What is the best way to replace the Login and Register texts (navbar) with FA icons on mobile view only?
Thanks.

 

[Old Nick]

Mr @BassMan maybe?

 

[BassMan]

Hi @Old Nick!

I would go with this in extra.less template:

@media (max-width: @xf-responsiveMedium) {
    .p-navgroup-link--logIn, .p-navgroup-link--register {
        .p-navgroup-linkText {
            display: none;
        }
    }
}

 

[Old Nick]

Great ! Thank you very much.

.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before,
.p-offCanvasRegisterLink [href*="login"]:before {
       .m-faIcon(@fa-var-key);
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before,
.p-offCanvasRegisterLink [href*="register"]:before {
       .m-faIcon(@fa-var-clipboard);
}

@media (max-width: @xf-responsiveMedium) {
    .p-navgroup-link--logIn, .p-navgroup-link--register {
        .p-navgroup-linkText {
            display: none;
        }
    }
}

 

[BassMan]

Yes, sorry, I forgot to add the icons as I already have them enabled on my test forum

 

[Old Nick]

No problem, i used your resource for the icons

[cXF] Icons for Login and Register buttons

Dec 27, 2017

... with Font Awesome

• BassMan
• bassman customizexf.com cxf font awesome icons login register
• XenForo tips & guides [2.x]