xF2 Template Modification Icons in registration

[Levi Ackerman]

True123 submitted a new resource:

Icons in registration - Icons in registration

Add this code to extra.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]

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

Here is my code which complies with xenforo standards:

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

 

[Levi Ackerman]

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

Here is my code which complies with xenforo standards:

.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]

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

Here is my code which complies with xenforo standards:

.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]

@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]

@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.

DarKMaSkHere is example of this.

 

[DarKMaSk]

Here is example of this.

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]

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

 

[Anafhet]

simple and efficient