Tutorial 2x Navtab menu FontAwesome use of - Thêm FontAwesome vào menu Navtab cho XenForo 2

[PVS]

Navtab menu FontAwesome use of - Thêm FontAwesome vào menu Navtab cho XenForo 2

Bài viết này sẽ hướng dẫn các bạn cách thêm biểu tượng FontAwesome vào menu Navtav cho XenForo 2. Cách làm khá đơn giản, các bạn chỉ cần vào template extra.less và thêm đoạn code này vào là xong.

/* xFDestek.com - Üst menü iconları - Başlangıç */
.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:"\f27a";padding-right:5px}
.p-navEl [data-nav-id="whatsNew"]:before{font-family:FontAwesome;content:"\f128";padding-right:5px}
.p-navEl [data-nav-id="xfrm"]:before{font-family:FontAwesome;content:"\f019";padding-right:5px}
.p-navEl [data-nav-id="members"]:before{font-family:FontAwesome;content:"\f0c0";padding-right:5px}
.p-navEl [data-nav-id="newPosts"]:before{font-family:FontAwesome;content:"\f06d";padding-right:3px}
.p-navEl [data-nav-id="findThreads"]:before{font-family:FontAwesome;content:"\f00e";padding-right:3px}
.p-navEl [data-nav-id="watched"]:before{font-family:FontAwesome;content:"\f06e";padding-right:3px}
.p-navEl [data-nav-id="searchForums"]:before{font-family:FontAwesome;content:"\f002";padding-right:3px}
.p-navEl [data-nav-id="markForumsRead"]:before{font-family:FontAwesome;content:"\f070";padding-right:3px}
.p-navEl [data-nav-id="whatsNewPosts"]:before{font-family:FontAwesome;content:"\f0f6";padding-right:3px}
.p-navEl [data-nav-id="xfrmNewResources"]:before{font-family:FontAwesome;content:"\f019";padding-right:3px}
.p-navEl [data-nav-id="whatsNewProfilePosts"]:before{font-family:FontAwesome;content:"\f040";padding-right:3px}
.p-navEl [data-nav-id="whatsNewNewsFeed"]:before{font-family:FontAwesome;content:"\f09e";padding-right:3px}
.p-navEl [data-nav-id="latestActivity"]:before{font-family:FontAwesome;content:"\f005";padding-right:3px}
.p-navEl [data-nav-id="xfrmLatestReviews"]:before{font-family:FontAwesome;content:"\f091";padding-right:3px}
.p-navEl [data-nav-id="xfrmYourResources"]:before{font-family:FontAwesome;content:"\f0ed";padding-right:3px}
.p-navEl [data-nav-id="xfrmWatched"]:before{font-family:FontAwesome;content:"\f0a7";padding-right:3px}
.p-navEl [data-nav-id="xfrmSearchResources"]:before{font-family:FontAwesome;content:"\f002";padding-right:3px}
.p-navEl [data-nav-id="currentVisitors"]:before{font-family:FontAwesome;content:"\f234";padding-right:3px}
.p-navEl [data-nav-id="newProfilePosts"]:before{font-family:FontAwesome;content:"\f040";padding-right:3px}
.p-navEl [data-nav-id="searchProfilePosts"]:before{font-family:FontAwesome;content:"\f21b";padding-right:3px}
/* xFDestek.com - Üst menü iconları - Bitiş */

Chú ý đoạn: content:"\f070". Phần màu đỏ chính là mã của biểu tượng FontAwesome.

Bạn có thể thay đổi biểu tượng bạn muốn bằng cách thay thế mã của nó. Mã của nó bạn có thể tìm thấy tại: http://fontawesome.io/icons/

Demo:

Forum

What's New

Resources

Members
​

Chúc các bạn thành công.

Nguồn: xenforo.com​