Tutorial 2x Icons in Visitor menu - Thêm biểu tượng vào menu Visitor của XenForo 2

1,552 7 1
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,828
Được Like
12,687
Icons in Visitor menu - Thêm biểu tượng vào menu Visitor của XenForo 2

Bạn muốn thêm các biểu tượng vào menu Visitor như thế này?

chrome_2019-02-23_21-19-53.png

​
Chỉ cần thêm đoạn code sau vào template Extra.less của bạn:
Mã: 
/* Icons in Visitor menu */
.menu-content.js-visitorMenuBody a.menu-linkRow {
    &:before {
        .m-faBase();
        padding-right: 5px;
    }
    &[href*="whats-new/news-feed"]:before {
        .m-faContent(@fa-var-rss);
    }
    &[href*="search/member"]:before {
        .m-faContent(@fa-var-comments);
    }
    &[href*="account/reactions"]:before {
        .m-faContent(@fa-var-thumbs-up);
    }
    &[href*="account/alerts"]:before {
        .m-faContent(@fa-var-bell);
    }
    &[href*="account/account-details"]:before {
        .m-faContent(@fa-var-user-cog);
    }
    &[href*="account/security"]:before {
        .m-faContent(@fa-var-shield-alt);
    }
    &[href*="account/privacy"]:before {
        .m-faContent(@fa-var-lock);
    }
    &[href*="account/preferences"]:before {
        .m-faContent(@fa-var-cogs);
    }
    &[href*="account/signature"]:before {
        .m-faContent(@fa-var-signature);
    }
    &[href*="account/upgrades"]:before {
        .m-faBase('Brands');
        .m-faContent(@fa-var-paypal);
    }
    &[href*="account/connected-accounts"]:before {
        .m-faContent(@fa-var-users-class);
    }
    &[href*="account/following"]:before {
        .m-faContent(@fa-var-user-plus);
    }
    &[href*="account/ignored"]:before {
        .m-faContent(@fa-var-user-minus);
    }
    &[href*="logout"]:before {
        .m-faContent(@fa-var-sign-out);
    }
}
/*****/

Lưu lại là xong.

Để thay đổi biểu tượng khác chỉ cần chỉnh sửa giá trị sau @fa-var-.

Để sử dụng biểu tượng thương hiệu, chẳng hạn như PayPal, bạn có thể thấy nó trong đoạn code trên, thêm .m-faBase('Brands');.

Nếu bạn có sử dụng route filter, hãy chỉnh sửa code mà bạn đã thay đổi bằng bộ lọc (ví dụ: nếu bạn đang sử dụng route filter cho account , thì hãy chỉnh sửa code ở trên cho phù hợp.

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


Nguồn: xenforo.com​
 
Bài viết liên quan
Ở footer của mình bị hiển thị như này. Không biết làm ntn để ẩn được? bởi gameboiz1806,
File Attachment nằm ở đâu trên fpt hosting vậy cả nhà nhỉ bởi bloghocpiano,
Mình đã cài Litespeed nhưng LS không nhận bởi gameboiz1806,
AE biết CDN nào mà ae xenforo hay sử dụng không? bởi gameboiz1806,
Làm thế nào để tinh giảm code CSS và Javascript trên xenforo? bởi gameboiz1806,
Làm như thế nào để chèn code vào thẻ <head> trên xenforo vậy ạ? bởi gameboiz1806,
Bài viết mới
Ở footer của mình bị hiển thị như này. Không biết làm ntn để ẩn được? bởi gameboiz1806,
File Attachment nằm ở đâu trên fpt hosting vậy cả nhà nhỉ bởi bloghocpiano,
Mình đã cài Litespeed nhưng LS không nhận bởi gameboiz1806,
Làm thế nào để gửi email cho users về các thread mới 1 tuần một lần? bởi gameboiz1806,
gặp sự cố khi upgrade bởi sanhpv,
AE biết CDN nào mà ae xenforo hay sử dụng không? bởi gameboiz1806,
Hoa Anh

Hoa Anh

MasterCorporal
Tham gia
18/09/2018
Bài viết
204
Được Like
71
tuyettrinh nói:
áp dụng cho style này không được: ;(;(;(;(;(
https://vnxf.vn/facexen-1-0-giao-dien-xenforo-2-phong-cach-facebook.t18464.html
Nhấn để mở rộng...
mình thử thì không được, còn k biết bạn thử thì như thế nào và nếu cái đó k được thì sử dụng cái này chèn vào extra.css
HTML: 
.p-navEl [data-nav-id="home"]:before {
    font-family: FontAwesome;
    content: "\f015";
    padding-right: 3px;
}

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

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

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

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

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

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

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

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

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

.menu-content [data-nav-id="whatsNewPosts"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f2c0";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewNewsFeed"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content [data-nav-id="latestActivity"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="currentVisitors"]:before{
    font-family: FontAwesome;
    content: "\f0c0";
    padding-right: 3px;
}

.menu-content [data-nav-id="newProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content [data-nav-id="searchProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f00e";
    padding-right: 3px;
}

.menu-content [data-nav-id="yourThreads"]:before{
    font-family: FontAwesome;
    content: "\f114";
    padding-right: 3px;
}

.menu-content [data-nav-id="contributedThreads"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="unansweredThreads"]:before{
    font-family: FontAwesome;
    content: "\f086";
    padding-right: 3px;
}

.menu-content [data-nav-id="watchedThreads"]:before{
    font-family: FontAwesome;
    content: "\f2ce";
    padding-right: 3px;
}

.menu-content [data-nav-id="watchedForums"]:before{
    font-family: FontAwesome;
    content: "\f277";
    padding-right: 3px;
}

.menu-content a[href="{{ link('whats-new/news-feed') }}"]:before{
    font-family: FontAwesome;
    content: "\f09e";
    padding-right: 3px;
}

.menu-content li > a[href*="{{ link('search/member') }}"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/likes') }}"]:before{
    font-family: FontAwesome;
    content: "\f087";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/account-details') }}"]:before{
    font-family: FontAwesome;
    content: "\f2c0";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/preferences') }}"]:before{
    font-family: FontAwesome;
    content: "\f085";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/security') }}"]:before{
    font-family: FontAwesome;
    content: "\f023";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/signature') }}"]:before{
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/privacy') }}"]:before{
    font-family: FontAwesome;
    content: "\f070";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/following') }}"]:before{
    font-family: FontAwesome;
    content: "\f234";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/ignored') }}"]:before{
    font-family: FontAwesome;
    content: "\f235";
    padding-right: 3px;
}

.menu-content > a[href*="{{ link('logout') }}"]:before{
    font-family: FontAwesome;
    content: "\f011";
    padding-right: 3px;
}
 

Đính kèm

  • enxf-1.PNG
    enxf-1.PNG
    29.5 KB · Lượt xem: 23
  • enxf-3 (1).PNG
    enxf-3 (1).PNG
    8.5 KB · Lượt xem: 14
  • enxf-3.PNG
    enxf-3.PNG
    8.5 KB · Lượt xem: 12
  • enxf-4.PNG
    enxf-4.PNG
    7.3 KB · Lượt xem: 15
tuyettrinh

tuyettrinh

Gefreiter
Tham gia
08/12/2018
Bài viết
52
Được Like
23
Hoa Anh nói:
mình thử thì không được, còn k biết bạn thử thì như thế nào và nếu cái đó k được thì sử dụng cái này chèn vào extra.css
HTML: 
.p-navEl [data-nav-id="home"]:before {
    font-family: FontAwesome;
    content: "\f015";
    padding-right: 3px;
}

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

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

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

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

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

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

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

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

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

.menu-content [data-nav-id="whatsNewPosts"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f2c0";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewNewsFeed"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content [data-nav-id="latestActivity"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="currentVisitors"]:before{
    font-family: FontAwesome;
    content: "\f0c0";
    padding-right: 3px;
}

.menu-content [data-nav-id="newProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content [data-nav-id="searchProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f00e";
    padding-right: 3px;
}

.menu-content [data-nav-id="yourThreads"]:before{
    font-family: FontAwesome;
    content: "\f114";
    padding-right: 3px;
}

.menu-content [data-nav-id="contributedThreads"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="unansweredThreads"]:before{
    font-family: FontAwesome;
    content: "\f086";
    padding-right: 3px;
}

.menu-content [data-nav-id="watchedThreads"]:before{
    font-family: FontAwesome;
    content: "\f2ce";
    padding-right: 3px;
}

.menu-content [data-nav-id="watchedForums"]:before{
    font-family: FontAwesome;
    content: "\f277";
    padding-right: 3px;
}

.menu-content a[href="{{ link('whats-new/news-feed') }}"]:before{
    font-family: FontAwesome;
    content: "\f09e";
    padding-right: 3px;
}

.menu-content li > a[href*="{{ link('search/member') }}"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/likes') }}"]:before{
    font-family: FontAwesome;
    content: "\f087";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/account-details') }}"]:before{
    font-family: FontAwesome;
    content: "\f2c0";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/preferences') }}"]:before{
    font-family: FontAwesome;
    content: "\f085";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/security') }}"]:before{
    font-family: FontAwesome;
    content: "\f023";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/signature') }}"]:before{
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/privacy') }}"]:before{
    font-family: FontAwesome;
    content: "\f070";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/following') }}"]:before{
    font-family: FontAwesome;
    content: "\f234";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/ignored') }}"]:before{
    font-family: FontAwesome;
    content: "\f235";
    padding-right: 3px;
}

.menu-content > a[href*="{{ link('logout') }}"]:before{
    font-family: FontAwesome;
    content: "\f011";
    padding-right: 3px;
}
Nhấn để mở rộng...
để thử xem sao. Cám ơn bạn.
 
tuyettrinh

tuyettrinh

Gefreiter
Tham gia
08/12/2018
Bài viết
52
Được Like
23
Hoa Anh nói:
mình thử thì không được, còn k biết bạn thử thì như thế nào và nếu cái đó k được thì sử dụng cái này chèn vào extra.css
HTML: 
.p-navEl [data-nav-id="home"]:before {
    font-family: FontAwesome;
    content: "\f015";
    padding-right: 3px;
}

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

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

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

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

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

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

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

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

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

.menu-content [data-nav-id="whatsNewPosts"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f2c0";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewNewsFeed"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content [data-nav-id="latestActivity"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="currentVisitors"]:before{
    font-family: FontAwesome;
    content: "\f0c0";
    padding-right: 3px;
}

.menu-content [data-nav-id="newProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content [data-nav-id="searchProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f00e";
    padding-right: 3px;
}

.menu-content [data-nav-id="yourThreads"]:before{
    font-family: FontAwesome;
    content: "\f114";
    padding-right: 3px;
}

.menu-content [data-nav-id="contributedThreads"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="unansweredThreads"]:before{
    font-family: FontAwesome;
    content: "\f086";
    padding-right: 3px;
}

.menu-content [data-nav-id="watchedThreads"]:before{
    font-family: FontAwesome;
    content: "\f2ce";
    padding-right: 3px;
}

.menu-content [data-nav-id="watchedForums"]:before{
    font-family: FontAwesome;
    content: "\f277";
    padding-right: 3px;
}

.menu-content a[href="{{ link('whats-new/news-feed') }}"]:before{
    font-family: FontAwesome;
    content: "\f09e";
    padding-right: 3px;
}

.menu-content li > a[href*="{{ link('search/member') }}"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/likes') }}"]:before{
    font-family: FontAwesome;
    content: "\f087";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/account-details') }}"]:before{
    font-family: FontAwesome;
    content: "\f2c0";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/preferences') }}"]:before{
    font-family: FontAwesome;
    content: "\f085";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/security') }}"]:before{
    font-family: FontAwesome;
    content: "\f023";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/signature') }}"]:before{
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/privacy') }}"]:before{
    font-family: FontAwesome;
    content: "\f070";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/following') }}"]:before{
    font-family: FontAwesome;
    content: "\f234";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/ignored') }}"]:before{
    font-family: FontAwesome;
    content: "\f235";
    padding-right: 3px;
}

.menu-content > a[href*="{{ link('logout') }}"]:before{
    font-family: FontAwesome;
    content: "\f011";
    padding-right: 3px;
}
Nhấn để mở rộng...
hj hj ngon lành rồi ạ. Cám ơn nhiều quá nhiều nè :p
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Tutorial 2x Adding Social Media Icons to the Header Section - Thêm biểu tượng mạng xã hội vào Header XenForo 2 Tips and Guides 0
PVS Tutorial 2x Enhance Post Sharing with Social Network Brand Icons - Tăng cường chia sẻ bài viết với các biểu tượng thương hiệu trên mạng xã hội cho XenForo 2 Tips and Guides 0
PVS Tutorial 2x FontAwesome Icons in Message User Info for Xenforo 2.2 - Thêm biểu tượng FontAwesome trong Message User Info của XenForo 2.2 Tips and Guides 0
PVS Tutorial 2x [cXF] Icons in Visitor menu - Thêm biểu tượng trong menu Visitor XenForo 2 Tips and Guides 0
PVS Tutorial 2x Tiled postbit with icons - Postbit dạng Tiled với biểu tượng cho XenForo 2 Tips and Guides 1

Chủ đề tương tự


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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom