Discourse导航项目图标/表情符号

:information_source: 摘要 在导航项前添加图标/表情符号
:hammer_and_wrench: 代码库 GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item
:question: 安装指南 如何安装主题或主题组件
:open_book: 初次使用 Discourse 主题? Discourse 主题使用入门指南

Install this theme component

你好 :wave:

使用此主题组件,您可以在导航项前添加图标或表情符号。该主题组件基于 https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656。

nav item prefix

此设置也可以处理图标和表情符号。

您必须遵循的规则是:

图标

如果您想在导航项前添加图标:
icon:nav-item:icon-set:icon-name:icon-color

首先,您必须定义类型,如果您想在导航项前添加图标,则为 icon

  • nav-item: latest, hot, new, unread, categories 等…
  • icon-set: brands, regular, solid
  • icon-color: currentColor, HEX 或颜色变量

例如:
icon:latest:solid:rocket:currentColor
icon:top:regular:star:var(--gold)
icon:unseen:solid:compass:#228C22

icon


表情符号

如果您想在导航项前添加表情符号:
emoji:nav-item:emoji-set:emoji-name:filter

首先,您必须定义类型,如果您想在导航项前添加表情符号,则为 emoji

  • nav-item: latest, hot, new, unread, categories 等…
  • emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
  • filter: 它使表情符号在浅色模式下为黑色,在深色模式下为白色。如果表情符号悬停或处于活动状态,它将以过渡方式显示。(可选)
    emoji-filter

例如:
emoji:latest:twitter:rocket:filter
emoji:top:google:star
emoji:new:facebook_messenger:bell

桌面导航

emoji

移动导航

8 个赞

很棒的唐,有没有希望让它与 FontAwesome Pro 一起使用?我使用浅色图标……

1 个赞

是的,我认为这是可能的,但不幸的是我无法访问专业图标集。它使用图标 SVG,所以如果你能访问它,它应该就能工作。这需要稍微修改组件并添加这些 SVG。之后,您就可以在设置中使用它了。另外,重要的是专业图标 SVG 在网站上的合法使用问题,我对此不确定。

2 个赞

为什么没有后续的讨论 :rofl: ?你创建的每一个话题,我都想要一个通知!正如这个术语所说……你太棒了!

1 个赞

更新 Discourse 后,移动终端不显示图标,引起了混淆,有没有人和我遇到同样的情况??

截图看起来是桌面视图(从左上角的汉堡包图标判断),但在我手机上该组件可以正常工作。:thinking:

我同意 @sheng_hualuo 关于新导航(下拉菜单)的说法,它没有出现。

我明白了,它也在下拉菜单中。 :thinking:

是的,抱歉,这个主题组件以及我修改了导航栏的其他组件都需要更新,因为这个更改 https://github.com/discourse/discourse/commit/931485b7c10dd61407697228c6a7fdc70c4f192d。我将考虑一个解决方案。我们可以轻松地在模态框中定位导航项,但不幸的是,选中的项没有特定的类,而且我认为我们必须从组件中删除桌面导航。

4 个赞

你好 :wave:

我已对该组件进行了更新。

  1. 移除移动设备上的桌面导航版本
  2. 增加对新移动导航的兼容性

不幸的是,由于此部分没有特定的导航项类,我们无法在此处添加。
Screenshot 2024-08-19 at 19.52.18

2 个赞

非常感谢您的修复,但我很抱歉桌面版功能被移除了,因为它与我的网站搭配起来效果很好。

2 个赞