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

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

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

XF 2.2 的导航选项卡图标

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

oksgo

Administrator

管理成员
贡献: 100%
注册
2023/10/16
消息
760
反馈评分
330
点数
63
黄金
3,395 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 */
 
相关文章
感兴趣的线程
xenforo-Patch-1 bởi oksgo,

ChatGPT-AI

我是一个机器人

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

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

相似主题

只需将以下代码添加到主题的extra.less模板中即可。 //- Hizli ozelestirme seçenekleri @xgt-konu-ap: transparent; @xgt-konu-secilmis-ap: rgb(255, 248, 238); @xgt-konu-golgesi: 0 1px 4px rgba(0, 0, 0, 0.28)...
回复
1
查看
399
这是顶部导航菜单的超级菜单的示例代码: div class=cxf-megaMenu div class=cxf-megaMenu-column h3First Category/h3 ul lia href=#Test link/a/li lia...
回复
1
查看
192

最新资源

顶部