xF2 Thêm icon Font Awesome vào Navigation cho xenForo 2

  • Bạn không tìm được Add-on hay Style xenForo 1 trên hệ thống xFv2 hiện tại ?
    Đăng bài yêu cầu ngay !
  • Can't find your Add-on or Style on xFv2 ?
    Request now !

kyniem

New Member
10/2/18
9
16
3
Bài này sẽ hướng dẫn các bạn thêm icon vào Navigation cho xenForo 2. Feel free to ask a question !
Các bạn có thể tìm thêm icon tại đây: https://fontawesome.com/icons
Khi bạn click vào mỗi icon, unicode của nó sẽ hiện ra như hình dưới

1518281815885.png


Sử dụng Developer Tools trên Chrome để tìm Navigation Tab ID.

CSS:
/****************** Menu/Sub Menu icons ****************************/

.p-navEl [data-nav-id="home"]:before{font-family:FontAwesome;content:"\f015";padding-right:5px}
.p-navEl [data-nav-id="forums"]:before{font-family:FontAwesome;content:"\f27b";padding-right:5px}

.p-navEl [data-nav-id="whatsNew"]:before{font-family:FontAwesome;content:"\f0a2";padding-right:5px}

/***************** Sub menu whatsnew ****************************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewPosts"]:before{
    font-family: FontAwesome;
    content: "\f067";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f007";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewNewsFeed"]:before{
    font-family: FontAwesome;
    content: "\f1ea";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="latestActivity"]:before{
    font-family: FontAwesome;
    content: "\f043";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgWhatsNewNewMedia"]:before{
    font-family: FontAwesome;
    content: "\f03e";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgWhatsNewMediaComments"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmNewResources"]:before{
    font-family: FontAwesome;
    content: "\f019";
    padding-right: 5px;
}

/**************************************************/

.p-navEl [data-nav-id="members"]:before{font-family:FontAwesome;content:"\f2be";padding-right:5px}

/*********************members sub menu **************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="currentVisitors"]:before{
    font-family: FontAwesome;
    content: "\f1e5";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="newProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="searchProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/

.p-navEl [data-nav-id="xfmg"]:before{font-family:FontAwesome;content:"\f03e";padding-right:5px}

/*********************media sub menu **************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgNewMedia"]:before{
    font-family: FontAwesome;
    content: "\f196";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgNewComments"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgSearchMedia"]:before{
    font-family: FontAwesome;
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/

.p-navEl [data-nav-id="xfrm"]:before{font-family:FontAwesome;content:"\f115";padding-right:5px}

/******************* resources sub menu ***********/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmLatestReviews"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmSearchResources"]:before{
    font-family: FontAwesome;
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/
 
Reactions: YaPBoZ and tuna

DubSac

Active User
8/3/18
10
3
3
USA
Thanks for the Tutorial for this I have been trying to figure this out myself.
 

Members online

No members online now.

Latest resources