Tutorial/教程 [cXF] Icons For Login And Register Buttons

[oksgo]

For XenForo 2.2 add below code to your extra.less template :

/* Icons for Login and Register buttons */
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before,
.p-offCanvasRegisterLink [href*="login"]:before {
    .m-faBase();
    .m-faContent(@fa-var-sign-in, 1em);
    color: #E6BB5C;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before,
.p-offCanvasRegisterLink [href*="register"]:before {
    .m-faBase();
    .m-faContent(@fa-var-key, 1em);
    color: #E6BB5C;
}
/**********/

Or if you want a Pro icon of a specific style change .m-faBase(); like this :
.m-faBase('Pro', @faWeight-solid);

For XenForo 2.3 add below code to your extra.less template :

/* Icons for Login and Register buttons */
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before,
.p-offCanvasRegisterLink [href*="login"]:before {
    .m-faContent(@fa-var-sign-in);
    color: #E6BB5C;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before,
.p-offCanvasRegisterLink [href*="register"]:before {
    .m-faContent(@fa-var-key);
    color: #E6BB5C;
}
/**********/

If you want an icon with one of the Font Awesome 5 Pro styles - light, solid or duotone - use the above code like this (example): .m-faContent(@fa-var-duotone-sign-in);. As you can see, you add the style name (in that case duotone) inside the code right after the var-.

 

Tutorial/教程  XenForo 新站安装的环境检查

Tutorial/教程  [cXF] Sticky Postbit