What's new

Welcome to

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

  • Our resources on xenforo.asia Forum is CLEAN and SAFE. So you can use it for development or production. But sometime the antivirus will warn the JS code. It's no problem. So before downloading, you need to disable the antivirus tools and then enjoy your "Party"!

Icons in Visitor menu - Add an icon to XenForo's Visitor menu 2

xenforo

Well-known member
Staff member
admin
Joined
Mar 18, 2019
Messages
397
Reaction score
829
Points
93
Icons in Visitor menu - Adding icons to XenForo's Visitor menu 2

Want to add the Visitor menu icons like this?

chrome_2019-02-23_21-19-53.png

Just add the following code to your Extra.less template:
Code:
/ * Icons in Visitor menu * /
.menu-content.js-visitorMenuBody a.menu-linkRow {
    &: before {
        .m-faBase ();
        padding-right: 5px;
    }
    & [href * = "whats-new / news-feed"]: before {
        .m-faContent (@ fa-var-rss);
    }
    & [href * = "search / member"]: before {
        .m-faContent (@ fa-var-comments);
    }
    & [href * = "account / reactions"]: before {
        .m-faContent (@ fa-var-thumbs-up);
    }
    & [href * = "account / alerts"]: before {
        .m-faContent (@ fa-var-bell);
    }
    & [href * = "account / account-details"]: before {
        .m-faContent (@ fa-var-user-cog);
    }
    & [href * = "account / security"]: before {
        .m-faContent (@ fa-var-shield-alt);
    }
    & [href * = "account / privacy"]: before {
        .m-faContent (@ fa-var-lock);
    }
    & [href * = "account / preferences"]: before {
        .m-faContent (@ fa-var-cogs);
    }
    & [href * = "account / signature"]: before {
        .m-faContent (@ fa-var-signature);
    }
    & [href * = "account / upgrades"]: before {
        .m-faBase ('Brands');
        .m-faContent (@ fa-var-paypal);
    }
    & [href * = "account / connected-accounts"]: before {
        .m-faContent (@ fa-var-users-class);
    }
    & [href * = "account / following"]: before {
        .m-faContent (@ fa-var-user-plus);
    }
    & [href * = "account / ignored"]: before {
        .m-faContent (@ fa-var-user-minus);
    }
    & [href * = "logout"]: before {
        .m-faContent (@ fa-var-sign-out);
    }
}
/ ***** /
Save is done.

To change another icon just edit the value after @ fa-var-.

To use the brand logo, such as PayPal, you can see it in the above code, adding .m-faBase ('Brands') ;.

If you have used a route filter, edit the code you changed with the filter (for example, if you are using route filter for the account , then edit the code above accordingly.

?Wish you success .
 
shape1
shape2
shape3
shape4
shape7
shape8
Top