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

[PVS]

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.

/* 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

What's New

Resources

Members

Tablet Screen

Tablet user login screen

Mobile Screenshot
​

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

Nguồn: xenforo.com​