Name: Icons on Notable members page
Availability: InStock
Author: axtona

Compatibilité XF

2.2.x

Description courte: Enhance your Notable members page with custom icons using our extra.less template. Customize and modify as needed based on specific routes or filters.

Would you like to have icons on Notable members page like this?

Add this to your extra.less template:

CSS:

/* Icons on Notable members page */
[data-template="member_notable"] .p-body-sideNavContent a.blockLink,
&[data-template="member_notable"] h3.block-textHeader a {
    &:before {
        .m-faBase();
        padding-right: 5px;
    }
    &[href*="members/"]:before {
        .m-faContent(@fa-var-ellipsis-h-alt);
    }
    &[href*="key=most_messages"]:before {
        .m-faContent(@fa-var-comments);
    }
    &[href*="key=highest_reaction_score"]:before {
        .m-faContent(@fa-var-thumbs-up);
    }
    &[href*="key=most_points"]:before {
        .m-faContent(@fa-var-dot-circle);
    }
    &[href*="key=xfrm_most_resources"]:before {
        .m-faContent(@fa-var-cog);
    }
    &[href*="key=xfmg_most_media_items"]:before {
        .m-faContent(@fa-var-images);
    }
    &[href*="key=xfmg_most_albums"]:before {
        .m-faContent(@fa-var-image);
    }
    &[href*="key=todays_birthdays"]:before {
        .m-faContent(@fa-var-gift);
    }
    &[href*="key=staff_members"]:before {
        .m-faContent(@fa-var-user-tie);
    }
}
/*****/

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

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 members to users, then edit above code to suit.

Auteur: axtona

Vues: 499

Première publication: Mai 23, 2022

Dernière mise à jour: Mai 23, 2022

Évaluations 0.00 étoile(s) 0 évaluations

Rejoindre le fil de discussion Plus d'informations

Lien cassé ? Envoyer un message à l’équipe NP et nous vous aiderons rapidement !

Soutenez le développeur Si vous êtes satisfait du test ou que votre projet vous a rapporté de l’argent, cliquez sur le bouton « Plus d’informations » pour soutenir le développeur en achetant.

Partager cette ressource