Icone Code for Fontawesome

Meta · Oct 22, 2024

I show you the code for all forum icons, it's working for version Xenforo 2.3

All Code should be add it to ( extra.less )

1- Main Fourm iCone

CSS:

/* XenForo 2.1.x Navtab menu FontAwesome 5 - Start */
.p-navEl a:before {
    .m-faBase();
    display: inline-block;
    text-align: center;
    margin-right:5px;
    border-radius:30px;
    line-height:normal;
}
.p-navEl a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
.p-navEl a[data-nav-id='forums']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='whatsNew']:before {.m-faContent("@{fa-var-question}");}
.p-navEl a[data-nav-id='members']:before {.m-faContent("@{fa-var-users}");}
.p-navEl a[data-nav-id='xfrm']:before {.m-faContent("@{fa-var-download}");}
.p-navEl a[data-nav-id='xfmg']:before {.m-faContent("@{fa-var-camera}");}
/*Subnav Forums*/
.p-navEl a[data-nav-id='newPosts']:before {.m-faContent("@{fa-var-search-plus}");}
.p-navEl a[data-nav-id='findThreads']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='searchForums']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='watched']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='markForumsRead']:before {.m-faContent("@{fa-var-eye-slash}");}
/* WhatsNew Subnav */
.p-navEl a[data-nav-id='whatsNewPosts']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='whatsNewProfilePosts']:before {.m-faContent("@{fa-var-rss}");}
.p-navEl a[data-nav-id='whatsNewNewsFeed']:before {.m-faContent("@{fa-var-star}");}
.p-navEl a[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent("@{fa-var-images}");}
.p-navEl a[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='xfrmNewResources']:before {.m-faContent("@{fa-var-download}");}
.p-navEl a[data-nav-id='latestActivity']:before {.m-faContent("@{fa-var-trophy}");}
/* XFMG Subnav */
.p-navEl a[data-nav-id='xfmgNewMedia']:before {.m-faContent("@{fa-var-images}");}
.p-navEl a[data-nav-id='xfmgNewComments']:before {.m-faContent("@{fa-var-comments}");}
.p-navEl a[data-nav-id='xfmgAddMedia']:before {.m-faContent("@{fa-var-plus-square}");}
.p-navEl a[data-nav-id='xfmgYourContent']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xfmgWatchedContent']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xfmgSearchMedia']:before {.m-faContent("@{fa-var-search}");}
.p-navEl a[data-nav-id='xfmgMarkViewed']:before {.m-faContent("@{fa-var-eye-slash}");}
/* XFRM Subnav */
.p-navEl a[data-nav-id='xfrmLatestReviews']:before {.m-faContent("@{fa-var-balance-scale}");}
.p-navEl a[data-nav-id='xfrmYourResources']:before {.m-faContent("@{fa-var-user}");}
.p-navEl a[data-nav-id='xfrmWatched']:before {.m-faContent("@{fa-var-eye}");}
.p-navEl a[data-nav-id='xfrmSearchResources']:before {.m-faContent("@{fa-var-search}");}
/* Members Subnav */
.p-navEl a[data-nav-id='currentVisitors']:before {.m-faContent("@{fa-var-user-plus}");}
.p-navEl a[data-nav-id='newProfilePosts']:before {.m-faContent("@{fa-var-pencil}");}
.p-navEl a[data-nav-id='searchProfilePosts']:before {.m-faContent("@{fa-var-user-secret}");}
/* XenForo 2.1.x Navtab menu FontAwesome 5 - End */

2- User Information

- Code below

CSS:

/* 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);
    }
}
/*****/

3- Members

- Code below

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);
    }
}
/*****/

4- Account Details

- Code below

CSS:

/* 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);
        }
    }
}
/*****/

5- Forum List: Sidebar

- Code below

CSS:

[data-widget-section="staffMembers"] h3.block-minorHeader:before { /* Staff online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-user-tie);
}
[data-widget-section="onlineNow"] h3.block-minorHeader:before { /* Members online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-users);
}
[data-widget-key="forum_overview_new_posts"] h3.block-minorHeader:before { /* Latest posts */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-comments);
}
[data-widget-key="xfrm_forum_overview_new_resources"] h3.block-minorHeader:before { /* Latest resources */
    display: inline-block;
    .m-faBase();
    .m-faContent(@fa-var-download);
}
[data-widget-key="forum_overview_forum_statistics"] h3.block-minorHeader:before { /* Forum statistics */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-chart-bar);
}
[data-widget-key="xfmg_media_slider"] h3.block-minorHeader:before { /* Random media */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-image);
}
[data-widget-key="forum_overview_share_page"] h3.block-minorHeader:before { /* Share this page */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-share-alt);
}

6- Main Fourm iCone Colored

- Code below

CSS:

/* NavBar modifications */
.p-navEl a:before, .p-navEl:before,.offCanvasMenu--nav:before, .p-nav-list .p-navEl ap-navEl-link:before {
    .m-faBase();
/* display: inline-block;*/
    text-align: center;
/* margin-right:5px;*/
    border-radius:30px;
    line-height:normal;
}

.offCanvasMenu--nav a[data-nav-id='home']:before,.p-navEl a[data-nav-id='home']:before {.m-faContent("@{fa-var -home}");}
.offCanvasMenu--nav a[data-nav-id='forums']:before,.p-navEl a[data-nav-id='forums']:before {.m-faContent("@{fa-var -comments}");color: #fc8a21;}
.offCanvasMenu--nav a[data-nav-id='whatsNew']:before,.p-navEl a[data-nav-id='whatsNew']:before {.m-faContent("@{fa-var -question}");color: #faf08c;}
.offCanvasMenu--nav a[data-nav-id='members']:before,.p-navEl a[data-nav-id='members']:before {.m-faContent("@{fa-var -users}");color: cyan;}

.offCanvasMenu--nav a[data-nav-id='xfrm']:before,.p-navEl a[data-nav-id='xfrm']:before {.m-faContent("@{fa-var -download}");color: #ee5f78;}
.offCanvasMenu--nav a[data-nav-id='xfmg']:before,.p-navEl a[data-nav-id='xfmg']:before {.m-faContent("@{fa-var -camera-retro}");color: #93f8fc;}
.offCanvasMenu--nav a[data-nav-id='xa_showcase']:before,.p-navEl a[data-nav-id='xa_showcase']:before {.m-faContent("@{fa-var -planet-ringed}");color: #db52db;}
.offCanvasMenu--nav a[data-nav-id='xa_ams']:before,.p-navEl a[data-nav-id='xa_ams']:before {.m-faContent("@{fa-var -pencil}");color: #bdf406;}
.offCanvasMenu--nav a[data-nav-id='xa_cas']:before,.p-navEl a[data-nav-id='xa_cas']:before {.m-faContent("@{fa-var -dollar-sign}");color: #04cf04;}
.offCanvasMenu--nav a[data-nav-id='xa_ld']:before,.p-navEl a[data-nav-id='xa_ld']:before {.m-faContent("@{fa-var -link}");color: #9c95c6;}
.offCanvasMenu--nav a[data-nav-id='xa_rms']:before,.p-navEl a[data-nav-id='xa_rms']:before {.m-faContent("@{fa-var -atom}");color: #9c95c6;}
.offCanvasMenu--nav a[data-nav-id='xa_ubs']:before,.p-navEl a[data-nav-id='xa_ubs']:before {.m-faContent("@{fa-var -blog}");color: #f4b4fa;}
.offCanvasMenu--nav a[data-nav-id='xa_ims']:before,.p-navEl a[data-nav-id='xa_ims']:before {.m-faContent("@{fa-var -clipboard-list}");color: #9c95c6;}
.offCanvasMenu--nav a[data-nav-id='tl_groups']:before,.p-navEl a[data-nav-id='tl_groups']:before {.m-faContent("@{fa-var -user-friends}");color: #a5f4ae;}
.p-navEl [data-nav-id='astroutil']:before {.m-faContent("@{fa-var-tools}");color: #fd9ab0; display:block; text-align: center; margin-left: auto;
    margin-right: auto; padding-right: 30px;}
.offCanvasMenu--nav [data-nav-id='astroutil']:before{.m-faContent("@{fa-var-tools}");color: #fd9ab0;}
 

/* Navtab menu using FontAwesome 5 */

7- login and register icon

- Code below

CSS:

/* Icons for Login and Register buttons */
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before {
    .m-faContent(@fa-var-sign-in);
    color: #E6BB5C;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before {
    .m-faContent(@fa-var-key);
    color: #E6BB5C;
}
/**********/

8- Fourm Rules

code

CSS:

.p-footer-linkList a[href*="/help/"]:before{.m-faContent(@fa-var-info-circle);}

.p-footer-linkList a[href*="/misc/contact"]:before{.m-faContent(@fa-var-envelope);}

.p-footer-linkList a[href*="/terms/"]:before{.m-faContent(@fa-var-file-alt);}

.p-footer-linkList a[href*="/privacy-policy/"]:before{.m-faContent(@fa-var-user-secret);}

.p-footer-linkList a[href*="https://nadorforum.com"]:before{.m-faContent(@fa-var-home);}

9- Home Furm Only

- Code below

CSS:

.p-navEl a{
 
        &[data-nav-id='home']:before{
            .m-faBase('Pro');
            .m-faContent(@fa-var-home);
        }
}