Adding Font Awesome Icons to Sidebar Widgets and More

xF2 Template Modification Adding Font Awesome Icons to Sidebar Widgets and More

Overview Discussion (8)
DareSec

DareSec

Inforc3r
Staff member
Administrator
Moderator
S.V.I.P Member
Collaborate
Registered
Joined
May 25, 2019
Messages
1,388
Points
523

Reputation:

DareDevil submitted a new resource:

Adding Font Awesome Icons to Sidebar Widgets and More - Font Awesome Icons to Sidebar

1589275844648-png.png

Add extra.less to the template.


Less: 
.block {
    h3:before {
        display: inline-block;
        .m-faBase();
        padding-right: 3px;
    }

    &[data-widget-section="staffMembers"] {
        h3 {
            .m-faBefore("\f0e3");
        }
    }

    &[data-widget-section="onlineNow"] {
        h3 {
            .m-faBefore("\f007")
        }
    }

    &[data-widget-definition="new_profile_posts"] {...
Click to expand...

Read more about this resource...
 
ENXF NET

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P.S Member
S.V.I.P Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
24,783
Points
823

Reputation:

You must change it yourself if you want it to appear elsewhere
Please change the red text according to your request
Rich (BB code): 
  &[data-widget-section="staffMembers"] {
        h3 {
            .m-faBefore("\f0e3");
        }
    }
 
O

one_finger_man

Well-known member
Registered
Joined
Jan 20, 2022
Messages
411
Points
53

Reputation:

this should work add to css

Code: 
[data-widget-section="staffMembers"] h3.block-minorHeader:before { /* Online yöneticiler */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-user-tie);
}
[data-widget-section="onlineNow"] h3.block-minorHeader:before { /* Çevrimiçi kullanıcılar */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-users);
}
[data-widget-key="forum_overview_new_posts"] h3.block-minorHeader:before { /* Son mesajlar */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-comments);
}
[data-widget-key="forum_overview_new_profile_posts"] h3.block-minorHeader:before { /* Profil mesajları */
    display: inline-block;
    padding-right: 5px;
    .m-faContent(@fa-var-address-card);
}
[data-widget-key="xfrm_forum_overview_new_resources"] h3.block-minorHeader:before { /* Son kaynaklar */
    display: inline-block;
    .m-faBase();
    .m-faContent(@fa-var-download);
}
[data-widget-key="forum_overview_forum_statistics"] h3.block-minorHeader:before { /* Forum istatistikleri */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-chart-bar);
}
[data-widget-key="xfmg_media_slider"] h3.block-minorHeader:before { /* Rastgele medya */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-image);
}
[data-widget-key="forum_overview_share_page"] h3.block-minorHeader:before { /* Sayfayı paylaş */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-share-alt);
}


and you can add this to the nav
Code: 
/***Navigasyon ve Mobil Menü İconları 2.3 ***/
/*Navigasyon ve Mobil Menü İconları */
.cxf-vn-content .offCanvasMenu-link {
    &.u-indentDepth1:before {
        margin-right: 15px;
    }
    &.u-indentDepth2:before {
        margin-right: 28px;
    }
}
/*****/

.p-navEl-link, .menu-linkRow, .offCanvasMenu-link {

    &:before {
        display: inline-block;
        margin-right: 5px;
    }

    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-bolt);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}
    /* Forum navigasyon */
    &[data-nav-id='newPosts']:before {.m-faContent(@fa-var-search-plus);}
    &[data-nav-id='findThreads']:before {.m-faContent(@fa-var-search);}
    /* Konuları bul menüsü */
    &[data-nav-id='yourThreads']:before {.m-faContent(@fa-var-search); margin-right: 15px;}
    &[data-nav-id='contributedThreads']:before {.m-faContent(@fa-var-search); margin-right: 15px;}
    &[data-nav-id='unansweredThreads']:before {.m-faContent(@fa-var-search); margin-right: 15px;}
    /*****/
    &[data-nav-id='searchForums']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='watched']:before {.m-faContent(@fa-var-eye);}
    /* Forum Menüleri */
    &[data-nav-id='watchedThreads']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    &[data-nav-id='watchedForums']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    /*****/
    &[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-eye-slash);}
    /* Neler Yeni */
    &[data-nav-id='featured']:before {.m-faContent(@fa-var-award);}
    &[data-nav-id='whatsNewPosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='whatsNewProfilePosts']:before {.m-faContent(@fa-var-rss);}
    &[data-nav-id='whatsNewNewsFeed']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfrmNewResources']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='latestActivity']:before {.m-faContent(@fa-var-chart-line);}
    /* XFMG */
    &[data-nav-id='xfmgNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgNewComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfmgAddMedia']:before {.m-faContent(@fa-var-plus-square);}
    &[data-nav-id='xfmgYourContent']:before {.m-faContent(@fa-var-user);}
    /* Medya Galeri Sizden Gelenler */
    &[data-nav-id='xfmgYourMedia']:before {.m-faContent(@fa-var-user); margin-right: 15px;}
    &[data-nav-id='xfmgYourAlbums']:before {.m-faContent(@fa-var-user); margin-right: 15px;}
    /*****/
    &[data-nav-id='xfmgWatchedContent']:before {.m-faContent(@fa-var-eye);}
    /* Medya Galeri */
    &[data-nav-id='xfmgWatchedMedia']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    &[data-nav-id='xfmgWatchedAlbums']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    &[data-nav-id='xfmgWatchedCategories']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    /*****/
    &[data-nav-id='xfmgSearchMedia']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xfmgMarkViewed']:before {.m-faContent(@fa-var-eye-slash);}
    /* Kaynaklar SUB */
    &[data-nav-id='xfrmLatestReviews']:before {.m-faContent(@fa-var-balance-scale);}
    &[data-nav-id='xfrmYourResources']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xfrmWatched']:before {.m-faContent(@fa-var-eye);}
    /* Kaynaklar */
    &[data-nav-id='xfrmWatchedResources']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    &[data-nav-id='xfrmWatchedCategories']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    /*****/
    &[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-search);}
    /* Kullanıcılar */
    &[data-nav-id='registeredMembers']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='currentVisitors']:before {.m-faContent(@fa-var-user-plus);}
    &[data-nav-id='newProfilePosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='searchProfilePosts']:before {.m-faContent(@fa-var-user-secret);}
}
/* Navigasyon ve Mobil Menü İconları*/
 
O

one_finger_man

Well-known member
Registered
Joined
Jan 20, 2022
Messages
411
Points
53

Reputation:

Account page​


Code: 
/* Hesap sayfası sol menü iconları */
[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);
        }
    }
}
/*****/


Visitor Menu Icon​


Code: 
/* Visitor Menü İcon Ekleme */
.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);
    }
}
/*****/
 
Helpgsm

Helpgsm

Member
Registered
Joined
Oct 18, 2024
Messages
5
Points
3

Reputation:

Incredible @one_finger_man they have worked perfectly, now in case you want to do it for a verification badge using codes
 
Samuel

Samuel

Well-known member
Registered
Joined
May 13, 2021
Messages
91
Points
28

Reputation:

best guide, thank you 🌹
 
You must log in or register to reply here.
Top