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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,824
Được Like
12,687
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.
Mã:
/* 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:

2017-12-28_20-44-30.png

Forum

whats-new.png

What's New

resources.png

Resources

members.png

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


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom