Tutorial 2x Font Awesome Icons in Navbar for 2.1 - Thêm biểu tượng Font Awesome vào Navbar cho XenForo 2.1

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,495
Được Like
10,735
Font Awesome Icons in Navbar for 2.1 - Thêm biểu tượng Font Awesome vào Navbar cho XenForo 2.1

Chỉ cần thêm đoạn code sau vào template extra.less là xong:
Mã:
.p-navEl a::before{
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
}

.p-navEl a[data-nav-id="home"]::before{content: "\f015";}
.p-navEl a[data-nav-id="forums"]::before{content: "\f27a";}
.p-navEl a[data-nav-id="whatsNew"]::before{content: "\f0e7";}
.p-navEl a[data-nav-id="xfmg"]::before{content: "\f030";}
.p-navEl a[data-nav-id="xfrm"]::before{content: "\f019";}
.p-navEl a[data-nav-id="members"]::before{content: "\f0c0";}
.p-navEl a[data-nav-id="newPosts"]::before{content: "\f005";}
.p-navEl a[data-nav-id="findThreads"]::before{content: "\f00e";}
.p-navEl a[data-nav-id="watched"]::before{content: "\f06e";}
.p-navEl a[data-nav-id="searchForums"]::before{content: "\f002";}
.p-navEl a[data-nav-id="markForumsRead"]::before{content: "\f070";}

Kết quả:

Screenshot-2018-11-21 Testeintrag(4).png

Trước

Screenshot-2018-11-21 Testeintrag(3).png

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


Nguồn: xenforo.com​
 

hacobi1102

Thượng Đế
Tham gia
10/03/2016
Bài viết
355
Được Like
164
Ngon lành cành đào :D

Mã:
.p-navEl a::before{font-family:'Font Awesome 5 Pro';padding-right:5px;}
.p-navEl a[data-nav-id="home"]::before{content:"\f015";}
.p-navEl a[data-nav-id="EWRporta"]::before{content:"\f015";}
.p-navEl a[data-nav-id="forums"]::before{content:"\f086";}
.p-navEl a[data-nav-id="whatsNew"]::before{content:"\f0e7";color:#fabc3d;}
.p-navEl a[data-nav-id="members"]::before{content:"\f007";}
.p-navEl a[data-nav-id="siropuShoutbox"]::before{content:"\f0a1";}
 
Sửa lần cuối:

lex

Thượng Đế
Tham gia
11/11/2018
Bài viết
15
Được Like
2
bác nào có cho xen 1 không ạ
 

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

XenForo 1 XenForo 2
Translate by PVS


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