Tutorial 2x Navtab menu FontAwesome - Thêm FontAwesome vào menu Navtab có hỗ trợ mobile cho XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Navtab menu FontAwesome - Thêm FontAwesome vào menu Navtab có hỗ trợ mobile 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 Navtab cho XenForo 2. Tuy nhiên, phiên bản này có thêm hỗ trợ cho các thiết bị di động. 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 - Menülerim Fontawesome - Başlangıç */
.p-navEl-link{                             
    &:before{padding-right:5px;font-family: FontAwesome;content: "\f29c";}             
    &[data-nav-id="home"]{&:before{content: "\f015";}}
    &[data-nav-id="forums"]{&:before{content: '\f0e6';}}
    &[data-nav-id="whatsNew"]{&:before{content: '\f128';}}
    &[data-nav-id="members"]{&:before{content: '\f0c0';}}
    &[data-nav-id="xfrm"]{&:before{content: '\f019';}}
    &[data-nav-id="xfmg"]{&:before{content: '\f030';}}
    &[data-nav-id="newPosts"]{&:before{content: '\f06d';}}
    &[data-nav-id="findThreads"]{&:before{content: '\f00e';}}
    &[data-nav-id="searchForums"]{&:before{content: '\f002';}}
    &[data-nav-id="markForumsRead"]{&:before{content: '\f070';}}
    &[data-nav-id="whatsNewPosts"]{&:before{content: '\f0f6';}}
    &[data-nav-id="whatsNewProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="whatsNewNewsFeed"]{&:before{content: '\f09e';}}
    &[data-nav-id="latestActivity"]{&:before{content: '\f005';}}
    &[data-nav-id="xfrmLatestReviews"]{&:before{content: '\f091';}}
    &[data-nav-id="xfrmYourResources"]{&:before{content: '\f0ed';}}
    &[data-nav-id="xfrmWatched"]{&:before{content: '\f0a7';}}
    &[data-nav-id="xfrmSearchResources"]{&:before{content: '\f002';}}
    &[data-nav-id="currentVisitors"]{&:before{content: '\f234';}}
    &[data-nav-id="newProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="searchProfilePosts"]{&:before{content: '\f21b';}}
}
.offCanvasMenu-linkHolder a[href*="/login/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f08b" }
.offCanvasMenu-linkHolder a[href*="/register/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f25d" }
.offCanvasMenu-link[data-nav-id="forums"]:before { padding: 4px; font: normal normal normal 14px/1 FontAwesome; content: "\f086";}
.offCanvasMenu a[href*="/whats-new/posts/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05b" }
.offCanvasMenu a[href*="/find-threads/started"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f002" }
.offCanvasMenu a[href*="/find-threads/contributed"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f27b" }
.offCanvasMenu a[href*="/find-threads/unanswered"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f2d4" }
.offCanvasMenu a[href*="/takipedilen/konular"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0e6" }
.offCanvasMenu a[href*="/takipedilen/kategori"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f046" }
.offCanvasMenu a[href*="/ara/?type=post"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f002" }
.offCanvasMenu a[href*="/forum/-/mark-read?date="]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f196" }
.offCanvasMenu-linkHolder a[href*="/whats-new/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0e6" }
.offCanvasMenu a[href*="/whats-new/profile-posts/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f21b" }
.offCanvasMenu a[href*="/whats-new/news-feed"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f03a" }
.offCanvasMenu a[href*="/whats-new/latest-activity"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f06e" }
.offCanvasMenu a[href*="/whats-new/resources"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f164" }
.offCanvasMenu-linkHolder a[href*="/account/upgrades"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f07a" }
.offCanvasMenu-linkHolder a[href*="/kullanicilar/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f007" }
.offCanvasMenu a[href*="/uyeler/list/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0c0" }
.offCanvasMenu a[href*="/online/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f205" }
.offCanvasMenu a[href*="/ara/?type=profile_post"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f002" }
.offCanvasMenu a[href*="/kaynaklar/"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f187" }
.offCanvasMenu a[href*="/kaynaklar/latest-reviews"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f06e" }
.offCanvasMenu a[href*="/takipedilen/resources"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0e6" }
.offCanvasMenu a[href*="/takipedilen/resource-categories"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f046" }
.offCanvasMenu a[href*="/ara/?type=resource"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f002" }
/* xFDestek.com - Menülerim Fontawesome - Bitiş */

Chú ý đoạn: content:"\f015". 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:

forums.png

Forums

whats-new.png

What's New

resources.png

Resources

members.png

Members

Screenshot_2018-05-19-18-30-19.png

Tablet Screen

Screenshot_2018-05-19-18-35-32.png

Tablet user login screen

Screenshot_20180519-184327.png


Screenshot_20180519-184344.png

Mobile Screenshot
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