 |
摘要 | Discourse FontAwesome Pro 允许在 Discourse 中使用 Font Awesome Pro 图标，前提是您拥有 FontAwesome 许可证，并使用您账户的 NPM 包令牌。 |
 |
仓库链接 | https://github.com/discourse/discourse-fontawesome-pro |
 |
安装指南 | 如何在 Discourse 中安装插件 |
配置
与常规插件相比，启用此插件需要额外几个步骤：
首先，您需要设置一个额外的环境变量，其中包含您的 Font Awesome Pro 包令牌（请注意，这与您的 API 令牌不同）： DISCOURSE_FONTAWESOME_AUTH_TOKEN
安装脚本还需要在初始化期间作为额外的 “after_code” 钩子被调用。这将在构建过程中使用您的身份验证令牌下载并添加 FontAwesome Pro SVG。这是独立于插件克隆块之外的一个额外代码块。
以下是 app.yml 中的安装示例：
env:
DISCOURSE_FONTAWESOME_AUTH_TOKEN: 123456
hooks:
after_code:
- exec:
cd: $home/plugins
cmd:
- git clone https://github.com/discourse/discourse-fontawesome-pro.git
- exec:
cd: $home/plugins/discourse-fontawesome-pro
raise_on_fail: false
cmd:
- $home/plugins/discourse-fontawesome-pro/scripts/install.sh
选择覆盖图标族：
在管理设置中，您可以覆盖默认的 Discourse 图标族：
选择覆盖样式：
您还可以覆盖默认的图标样式：
双色（Duotone）
若要完全控制双色支持，您需要覆盖以下 CSS（在主题中或通过其他方式），并将其替换为您自己的配色方案：
svg {
--fa-secondary-color: red;
--fa-secondary-opacity: 0.6;
}
要为单个图标着色，请引用 SVG 的 ID：
#fad-search .fa-secondary {
--fa-secondary-color: red;
--fa-secondary-opacity: 0.6;
}
双色样式更新
如果您正在使用基于类的选择器，例如：.fa-secondary { color: red; }您将需要更新样式，改为使用 CSS 自定义属性。基于类的颜色覆盖不再起作用，因为它们在 Font Awesome v7 中已被移除
在底层，该插件使用 FontAwesome 的仓库 将字体安装到插件的 SVG 文件夹中，并让 Discourse 从那里获取精灵图（sprites）。