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,977
Được Like
11,316
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

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