Welcome to the TWC Wiki! You are not logged in. Please log in to the Wiki to vote in polls, change skin preferences, or edit pages. See HERE for details of how to LOG IN.
 Actions

ICONS SECTION: Difference between revisions

From TWC Wiki

Created page with "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 [https://fontawesome.com/v4/cheatsheet/ Font Awesome Cheatsheet] <pre> // ***** 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"],..."
 
 
Line 155: Line 155:
// ***** END ICONS SECTION *****
// ***** END ICONS SECTION *****
</pre>
</pre>
[[Category:TWC XenForo extra less chunks]]

Latest revision as of 03:16, 16 June 2025

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 *****
Cookies help us deliver our services. By using our services, you agree to our use of cookies.