Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

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

xenforo

Well-known member
Staff member
administrator
Moderator
Registered
Joined
Mar 18, 2019
Messages
475
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 .
 

For school childeren

Total amount
$0.00
Goal
$50.00

Help

Total amount
$0.00
Goal
$50.00
Donation ends:
Top Bottom