Resource icon

xF2 Template Modification Icons in registration

Levi Ackerman

Collaborate
Collaborate
Registered
Joined
Dec 26, 2021
Messages
106
Points
63

Reputation:

True123 submitted a new resource:

Icons in registration - Icons in registration

Add this code to extra.less
Less:
// Login
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f090";
    width: 1em;
    display: inline-block;
    text-align: center;
    color: #E6BB5C;
}
// Register...

Read more about this resource...
 

Fenrir

Collaborate
Collaborate
Registered
Joined
Dec 11, 2021
Messages
110
Points
143

Reputation:

Again template modification and again trash code. Refactoring needed here like this.

Here is my code which complies with xenforo standards:

Less:
.p-navgroup-link {
    &--logIn {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-sign-in);
            color: @xf-textColorAttention;
        }
    }
    &--register {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-key);
            color: @xf-textColorAttention;
        }
    }
}
 
Last edited:

Levi Ackerman

Collaborate
Collaborate
Registered
Joined
Dec 26, 2021
Messages
106
Points
63

Reputation:

Again template modification and again trash code. Refactoring needed here like this.

Here is my code which complies with xenforo standards:

Less:
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link {
    &--logIn {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-sign-in);
            color: @xf-textColorAttention;
        }
    }
    &--register {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-key);
            color: @xf-textColorAttention;
        }
    }
}
notwonderfulYes
 

meiji

Member
Registered
Joined
Mar 8, 2022
Messages
7
Points
3

Reputation:

Again template modification and again trash code. Refactoring needed here like this.

Here is my code which complies with xenforo standards:

Less:
.p-navgroup-link {
    &--logIn {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-sign-in);
            color: @xf-textColorAttention;
        }
    }
    &--register {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-key);
            color: @xf-textColorAttention;
        }
    }
}
notwonderfulHandy, thanks
 

DarKMaSk

Active member
Registered
Joined
Apr 2, 2021
Messages
30
Points
18

Reputation:

@Levi Ackerman and @notwonderful If I want to put the logout font-awesome icon in ACP, how can I do that? I know how to enable development mode but, what to put and where, that I don't know. Please help.
 

Fenrir

Collaborate
Collaborate
Registered
Joined
Dec 11, 2021
Messages
110
Points
143

Reputation:

DarKMaSk

Active member
Registered
Joined
Apr 2, 2021
Messages
30
Points
18

Reputation:

notwonderfulBut if I don't want to use an add-on, then how can I do it. I have put the logout link at the top pf ACP just beside the site name. Now I want to put either a logout icon beside it, or only an icon just like the one showed in the link you gave. I want to use code just like yours which you put above. I tried but their is no extra.less in master style of Admin Panel. Is it possible to do it by coding?
 

Fenrir

Collaborate
Collaborate
Registered
Joined
Dec 11, 2021
Messages
110
Points
143

Reputation:

But if I don't want to use an add-on, then how can I do it. I have put the logout link at the top pf ACP just beside the site name. Now I want to put either a logout icon beside it, or only an icon just like the one showed in the link you gave. I want to use code just like yours which you put above. I tried but their is no extra.less in master style of Admin Panel. Is it possible to do it by coding?
DarKMaSkLook into _data folder and you will understand how to do it
 
Top