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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,965
Được Like
11,302
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​
 

Hoa Anh

Thượng Đế
Tham gia
18/09/2018
Bài viết
204
Được Like
71
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: 17
  • enxf-3 (1).PNG
    enxf-3 (1).PNG
    8.5 KB · Lượt xem: 11
  • enxf-3.PNG
    enxf-3.PNG
    8.5 KB · Lượt xem: 10
  • enxf-4.PNG
    enxf-4.PNG
    7.3 KB · Lượt xem: 12

tuyettrinh

Thượng Đế
Tham gia
08/12/2018
Bài viết
52
Được Like
23
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;
}
để thử xem sao. Cám ơn bạn.
 

tuyettrinh

Thượng Đế
Tham gia
08/12/2018
Bài viết
52
Được Like
23
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;
}
hj hj ngon lành rồi ạ. Cám ơn nhiều quá nhiều nè :p
 

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