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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,965
Được Like
11,301
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom