Welcome to XenForo Premium Community

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

Template Code [cXF] Icons in Visitor menu

TuGa_MoDz

Well-known member
Banned
Joined
21 December 2019
Messages
419
Best answers
4
Reaction score
324
Points
63
Location
CH
Website
extra-gaming.com
Compatible XF 2.x versions 2.1 and 2.2

Would you like to have icons in Visitor menu like this?



Add this to your extra.less template:

Code:
/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody .menu-linkRow {
    padding: 6px 5px 6px 12px;
}
.menu-content.js-visitorMenuBody a.menu-linkRow {
    &:before {
        .m-faBase();
    }
    &[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);
    }
}
/*****/

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

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


If you are using route filters edit in the code what you've changed with filters (for example: if you're using route filter for account to something-else, then edit above code to suit.
 
shape1
shape2
shape3
shape4
shape7
shape8
Top