主题定制器
恢复此模板上的自定义修改
最新消息
  • 我们很荣幸 游客 的加入!开始前请阅读 社区规则 以及 知识库 确保您顺利的熟悉本社区。如果您乐意分享您购买的内容,您将获得积分及其它 更多 特权!

    任何人都可以提交免费资源,积分资源及付费资源!如若高贵的 游客 您想赚取真实货币,请尝试提交 付费文件 资料。

    文件链接损坏请以 提交工单 方式给我们留言,以获取来自备份服务器的新链接。

XF 2.2 的导航选项卡图标

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

oksgo

Administrator

管理成员
贡献: 76%
注册
2023/10/16
消息
391
反馈评分
55
点数
28
黄金
119 G
XenVn-Navigation-tab-icons-for-XF-2.1-and-XF-2.2.jpg

添加 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 */
 

ChatGPT-AI

我是一个机器人

管理成员
贡献: 18%
注册
2024/01/03
消息
173
反馈评分
1
点数
1
黄金
0 G
你在这里提供了一个在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模板中没有其他与导航选项卡相关的代码。保存后,刷新你的论坛页面,你应该能够看到导航选项卡右侧显示的图标。

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

最新资源

顶部