Tutorial/教程 XF 2.2 的导航选项卡图标

欢迎客人!

• 开始前请阅读社区规则确保您顺利的熟悉本社区。注册用户可以提交资源,如果您有已发布资源的新版本,您可以随时更新版本!

• 文件链接损坏请在文件下方留言,我们将会及时更新来自备份服务器的新链接。如有其它问题请 提交工单 和我们联系!

• 我们拥有多账户检测系统,对于重复注册我们将采取严厉措施!

• 提示:如果您的账户超过180天处于非活动状态,系统将自动删除您的账户!

• 我们尊重我们的用户,也希望您能进行愉快的交谈.

  • • 提示:如果您的账户超过180天处于非活动状态,系统将自动删除您的账户!

    • Reminder: If your account remains inactive for more than 180 days, the system will automatically delete your account!

oksgo

Administrator
管理成员
贡献: 30%
注册
10 16, 2023
消息
1,681
G
8,473 G
XenVn-Navigation-tab-icons-for-XF-2.1-and-XF-2.2.webp

添加 XF 2.1 和 XF 2.2 的导航选项卡图标。
将代码添加到extra.less模板中:
CSS:
/* [cXF] Navigation tab icons 2.2 */
.p-navEl a, .menu-linkRow, .offCanvasMenu--nav .js-offCanvasNavTarget a {

    &:before {
        .m-faBase();
        display: inline-block;
        margin-right: 5px;
    }

    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-bolt);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}
    /* Forums subnavigation */
    &[data-nav-id='newPosts']:before {.m-faContent(@fa-var-search-plus);}
    &[data-nav-id='findThreads']:before {.m-faContent(@fa-var-search);}
    /* Find threads menu */
    &[data-nav-id='yourThreads']:before {.m-faContent(@fa-var-search); margin-right: 15px;}
    &[data-nav-id='contributedThreads']:before {.m-faContent(@fa-var-search); margin-right: 15px;}
    &[data-nav-id='unansweredThreads']:before {.m-faContent(@fa-var-search); margin-right: 15px;}
    /*****/
    &[data-nav-id='searchForums']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='watched']:before {.m-faContent(@fa-var-eye);}
    /* Watched forums menu */
    &[data-nav-id='watchedThreads']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    &[data-nav-id='watchedForums']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    /*****/
    &[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-eye-slash);}
    /* WhatsNew subnavigation */
    &[data-nav-id='whatsNewPosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='whatsNewProfilePosts']:before {.m-faContent(@fa-var-rss);}
    &[data-nav-id='whatsNewNewsFeed']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfrmNewResources']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='latestActivity']:before {.m-faContent(@fa-var-trophy);}
    /* XFMG subnavigation */
    &[data-nav-id='xfmgNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgNewComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfmgAddMedia']:before {.m-faContent(@fa-var-plus-square);}
    &[data-nav-id='xfmgYourContent']:before {.m-faContent(@fa-var-user);}
    /* Your content menu */
    &[data-nav-id='xfmgYourMedia']:before {.m-faContent(@fa-var-user); margin-right: 15px;}
    &[data-nav-id='xfmgYourAlbums']:before {.m-faContent(@fa-var-user); margin-right: 15px;}
    /*****/
    &[data-nav-id='xfmgWatchedContent']:before {.m-faContent(@fa-var-eye);}
    /* Watched media menu */
    &[data-nav-id='xfmgWatchedMedia']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    &[data-nav-id='xfmgWatchedAlbums']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    &[data-nav-id='xfmgWatchedCategories']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    /*****/
    &[data-nav-id='xfmgSearchMedia']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xfmgMarkViewed']:before {.m-faContent(@fa-var-eye-slash);}
    /* XFRM subnavigation */
    &[data-nav-id='xfrmLatestReviews']:before {.m-faContent(@fa-var-balance-scale);}
    &[data-nav-id='xfrmYourResources']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xfrmWatched']:before {.m-faContent(@fa-var-eye);}
    /* Watched resources menu */
    &[data-nav-id='xfrmWatchedResources']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    &[data-nav-id='xfrmWatchedCategories']:before {.m-faContent(@fa-var-eye); margin-right: 15px;}
    /*****/
    &[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-search);}
    /* Members subnavigation */
    &[data-nav-id='currentVisitors']:before {.m-faContent(@fa-var-user-plus);}
    &[data-nav-id='newProfilePosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='searchProfilePosts']:before {.m-faContent(@fa-var-user-secret);}
}
/* [cXF] Navigation tab icons 2.2 */
 

附件

  • XenVn-Navigation-tab-icons-for-XF-2.1-and-XF-2.2.webp
    XenVn-Navigation-tab-icons-for-XF-2.1-and-XF-2.2.webp
    156.5 KB · 查看: 43
你在这里提供了一个在Extra.less模板中添加代码的示例,该代码用于在XF 2.1和XF 2.2中为导航选项卡添加图标。

首先,你需要将代码添加到Extra.less模板中。在你的XF安装中,可以通过访问 `Admin CP -> Appearance -> Templates -> Extra.less` 找到Extra.less模板。

然后,将提供的代码粘贴到Extra.less模板中并保存。这将为导航选项卡添加图标。根据代码中的设置,每个导航选项卡都有一个相应的图标。

你可以通过使用不同的 FontAwesome 图标类来更改图标。在代码的末尾,有一段注释,其中列出了可用的FontAwesome图标和相应的图标类。

请确保在粘贴代码之前,Extra.less模板中没有其他与导航选项卡相关的代码。保存后,刷新你的论坛页面,你应该能够看到导航选项卡右侧显示的图标。

如果你仍然遇到问题,请提供更多详细信息,以便我能够帮助你解决问题。
 

相似主题

原图标: 修改后的图标: 登录后台: 搜索模板:extra.less 添加以下代码: 保存退出,刷新前台页面,完美! 上图所示与主题其它图标匹配,如本站积分图标,鼠标滑动将会跟随本主题色调显示颜色!
0
46
0
对于xenforo 2.3 对于 xenforo 2.1 - 2.2 在 extra.less 模板中添加以下代码:
0
36
0
oksgo 提交新资源: [cXF] Mega Menu Tab - XenForo 高级菜单选项卡 - [cXF] Mega Menu Tab - XenForo 的高级菜单选项卡 阅读关于此资源更多信息...
1
507
0
只需将以下代码添加到主题的extra.less模板中即可。
2
560
0
1. 顶部 – Linux 顶部是底部。许多系统管理员经常使用 top 命令来监控Linux性能,并且在许多Linux /类 Unix 操作系统下都可用。 top命令用于以有序列表实时显示所有正在运行和活动的进程。它显示 CPU 使用情况、内存使用情况、交换内存使用情况、缓存大小、缓冲区大小、进程 PID、用户等。 top...
0
41
0
后退
顶部