ICONS SECTION
From TWC Wiki
Adds Font Awesome icons before text in menu sections. Including:
- Icons in side nav account page
- Icons in more options menu
- Icons in visitor menu
For possibly available icons see Font Awesome Cheatsheet
// ***** START ICONS SECTION *****
/* Icons in sidenav on Account page */
[data-template="account_alerts"], &[data-template="account_reactions"], &[data-template="account_bookmarks"],
&[data-template="account_details"], &[data-template="account_security"], &[data-template="account_privacy"],
&[data-template="account_preferences"], &[data-template="account_signature"], &[data-template="account_upgrades"],
&[data-template="account_connected"], &[data-template="account_applications"], &[data-template="account_following"], &[data-template="account_ignored"] {
.p-body-sideNavContent a.blockLink {
&[href*="members/"]:before {
.m-faContent(@fa-var-user);
}
&[href*="account/alerts"]:before {
.m-faContent(@fa-var-bell);
}
&[href*="account/reactions"]:before {
.m-faContent(@fa-var-thumbs-up);
}
&[href*="account/bookmarks"]:before {
.m-faContent(@fa-var-bookmark);
}
&[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-faContent(@fa-var-paypal);
}
&[href*="account/connected-accounts"]:before {
.m-faContent(@fa-var-users-class);
}
&[href*="account/applications"]:before {
.m-faContent(@fa-var-grip-horizontal);
}
&[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);
}
}
}
/*****/
/* [cXF] Icons in More options menu */
.menu--right .menu-content a.menu-linkRow {
&:before {
padding-right: 5px;
}
&[href*="/edit"]:before {
.m-faContent(@fa-var-edit);
}
&[href*="/change-type"]:before {
.m-faContent(@fa-var-shapes);
}
&[href*="/quick-close"]:before {
.m-faContent(@fa-var-lock);
}
&[href*="/quick-stick"]:before {
.m-faContent(@fa-var-thumbtack);
}
&[href*="/feature"]:before {
.m-faContent(@fa-var-award);
}
&[href*="/poll/create"]:before {
.m-faContent(@fa-var-poll);
}
&[href*="/delete"]:before {
.m-faContent(@fa-var-trash-alt);
}
&[href*="/move"]:before {
.m-faContent(@fa-var-arrow-from-left);
}
&[href*="/reply-bans"]:before {
.m-faContent(@fa-var-ban);
}
&[href*="/moderator-actions"]:before {
.m-faContent(@fa-var-clipboard-user);
}
}
/*****/
/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody .menu-linkRow {
padding: 6px 5px 6px 12px;
}
.menu-content.js-visitorMenuBody a.menu-linkRow {
&:before {
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);
}
}
/*****/
// ***** END ICONS SECTION *****
