Tutorial 2x Font Awesome on Menu and Sub Menus - Font Awesome trên Menu và Sub Menu 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,977
Được Like
11,315
Font Awesome on Menu and Sub Menus - Font Awesome trên Menu và Sub Menu cho XenForo 2

Thêm biểu tượng font awesome vào menu và submenu thả xuống.

Bạn có thể tìm thấy nhiều mã unicode font awesome hơn tại Font Awesome Icon List.

Khi bạn nhấp vào biểu tượng đơn, nó sẽ có unicode dưới biểu tượng được hiển thị.

ntsJzPE.jpg

Bạn có thể thêm màu bất cứ lúc nào bằng thuộc tính màu CSS.

Để tìm các menu item bị thiếu, chỉ cần sử dụng F12/developer tools để tìm id định vị dữ liệu bị thiếu.
Mã:
/****************** Menu/Sub Menu icons ****************************/

.p-navEl [data-nav-id="home"]:before{font-family:FontAwesome;content:"\f015";padding-right:5px}
.p-navEl [data-nav-id="forums"]:before{font-family:FontAwesome;content:"\f27b";padding-right:5px}

.p-navEl [data-nav-id="whatsNew"]:before{font-family:FontAwesome;content:"\f0a2";padding-right:5px}

/***************** Sub menu whatsnew ****************************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewPosts"]:before{
    font-family: FontAwesome;
    content: "\f067";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f007";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="whatsNewNewsFeed"]:before{
    font-family: FontAwesome;
    content: "\f1ea";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="latestActivity"]:before{
    font-family: FontAwesome;
    content: "\f043";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgWhatsNewNewMedia"]:before{
    font-family: FontAwesome;
    content: "\f03e";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgWhatsNewMediaComments"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmNewResources"]:before{
    font-family: FontAwesome;
    content: "\f019";
    padding-right: 5px;
}

/**************************************************/

.p-navEl [data-nav-id="members"]:before{font-family:FontAwesome;content:"\f2be";padding-right:5px}

/*********************members sub menu **************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="currentVisitors"]:before{
    font-family: FontAwesome;
    content: "\f1e5";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="newProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="searchProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/

.p-navEl [data-nav-id="xfmg"]:before{font-family:FontAwesome;content:"\f03e";padding-right:5px}

/*********************media sub menu **************/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgNewMedia"]:before{
    font-family: FontAwesome;
    content: "\f196";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgNewComments"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfmgSearchMedia"]:before{
    font-family: FontAwesome;
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/

.p-navEl [data-nav-id="xfrm"]:before{font-family:FontAwesome;content:"\f115";padding-right:5px}

/******************* resources sub menu ***********/
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmLatestReviews"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 5px;
}
.menu-linkRow.u-indentDepth0.js-offCanvasCopy[data-nav-id="xfrmSearchResources"]:before{
    font-family: FontAwesome;
    content: "\f002";
    padding-right: 5px;
}
/**************************************************/

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