介绍 Font Awesome 5 和 SVG 图标

新闻和活动 公告
105

Wondering “how do you load a plugin from a private repository?” after reading this thread? My bad, here’s how you do that:

  1. cd /var/discourse
  2. vim containers/app.yml
  3. Add plugin repo to app.yml similar to public gits, but make these changes to the https link.

- git clone https://username:password@github.com/user-name/plugin-name.git

Instead of grabbing the https from github as per usual, the git URL is comprised of:

  1. Your github username followed by the colon character :
  2. Your github password followed by the ampersand at character @
  3. Github’s URL followed by the forward-slash character /
  4. Your github username followed by the forward-slash character /
  5. Your plugin repository-name followed by .git

Hope this helps. :raised_hands:

2 个赞
106

You can also use a token, which avoids having to use username and password. Github provides a means to generate the token.

6 个赞
107

Hey @jameshahnii, @merefield’s reply is the current recommended method. See Install Plugins in Discourse for full details.

8 个赞
108

你好！我在想是否可以在主题组件中添加自定义图标。

https://meta.discourse.org/t/iconified-header-links/86307/54

我们希望使用上述组件，将 categories%20icon 作为我们实例头部中的可点击图标。

即使仔细查看了这里的说明以及相关主题的内容，我仍然有点困惑，不知道该如何操作。

2 个赞
109

我已更新了 OP 中的“添加自定义图标”部分，@justin.noom，现在按照步骤操作可能会更容易。

5 个赞
110

谢谢你，@pmusaraj！:smiley:

所以，如果我将一个名为 test.svg 的 .svg 文件上传到组件，然后将 test 添加到 svg_icons 中，它就会正确显示出来吗？

1 个赞
111

不完全对。上传的文件应该是一个 SVG 精灵（sprite）。文件名无关紧要，但重要的是其中包含的符号必须具有 ID，这样你就可以在支持图标的组件（如图标化的标题链接、标签图标、分类图标等）中使用它们。请务必查看 OP 中的示例 SVG 精灵。

2 个赞
112

下图所示的设置是否正确反映了这一点？

当前组件设置：

svg
svg759×434 10.4 KB

使用的精灵图：

noom-info

结果：

results

1 个赞
113

您需要重新上传您的 SVG 精灵图，并将变量名设为 icons-sprite：

fontawesome
fontawesome890×642 43.4 KB

noom-info 是您 SVG 精灵图中符号的 ID 吗？

2 个赞
114

不幸的是，我最初并没有编译它。您能推荐一些可以检查或编辑该信息的软件吗？

1 个赞
115

你可以手动操作，因为 SVG 是 XML 格式。快速搜索 Google 找到了这个有用的链接：https://css-tricks.com/svg-symbol-good-choice-icons/（OP 中的示例文件也非常易于阅读，它只包含两个符号）。

5 个赞
116

这看起来是个很棒的资源，谢谢！

2 个赞
117

是否可以使用 Font Awesome 的双色图标？这些图标的 SVG 代码略有不同，且缺少似乎对精灵文件（sprite file）必需的 symbol 元素。以下是一个示例，其中部分信息已被移除，以避免侵犯版权，因为这些内容属于 Font Awesome 的付费包。

<svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="award" class="svg-inline--fa fa-award fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M382.78 448.69L324 304.23a40.63 40.63 0 0 1-22.23 15.62C280 325.78 278.26.25-38.28 52.69 2A16 16 0 0 0 384 455.33a16.23 16.23 0 0 0-1.22-6.64zM192 240a64 64 0 1 0-64-64 64 64 0 0 0 64 64z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M366.62 152.72a41.51 41.51 0 0 0-10.42-39.59c-20.41-20.77-18.47-17.35-25.95-45.74a40.66 40.66 0 0 0-28.47-29c-27.88-7.61-24.54-25 25.95-45.75a41.49 41.49 0 0 0 10.42-39.58c-7.48-28.36-7.49-24.4-.01-52.81zM192 272a96 96 0 1 1 96-96 96 96 0 0 1-96 96z"></path></g></svg>

8 个赞
118

我目前无法测试这一点，但看起来是可行的。你可以尝试将 SVG 元素转换为带有 ID 的 symbol，如果可行，你就可以将 fa-primary 和 fa-secondary 样式添加到你的样式表中。

9 个赞
120

我发现，自定义图标如果是单一路径、没有分组且没有任何变换，效果会更好（甚至可能只有在这样的情况下才能生效）。

若要用 Inkscape 将任意 SVG 转换为符合上述要求的 SVG 文件，可以按以下步骤操作：

  1. 取消所有分组，全选所有对象，然后选择 [路径/对象转路径]。
  2. 获取并安装 Apply transform 扩展，并将其应用于剩余的路径：[扩展/修改路径/应用变换]。
  3. 将所有内容另存为优化后的 SVG，并勾选几乎所有选项，以便删除除路径以外的所有内容。

之后，只需复制路径、viewbox 属性，并选择所需的 id 名称即可。

7 个赞
121

你好，我在处理主题中的图标时遇到了一些问题：

  1. 为了启用更多的 FA 图标，我在 settings.yml 中添加了以下内容：
svg_icons:
  default: "youtube|linkedin"
  type: "list"
  list_type: "compact"

但这并没有生效。

  1. 我还尝试添加了自定义图标

assets/icons.svg：

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="i-facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.235 0H1.766C.791 0 .001.791.001 1.765v28.469c0 .976.791 1.765 1.765 1.765h15.325V19.607h-4.172v-4.828h4.172v-3.567c0-4.132 2.525-6.38 6.212-6.38 1.767 0 3.285.129 3.728.188v4.32H24.47c-2 0-2.389.961-2.389 2.361v3.081h4.779l-.62 4.84h-4.159v12.376h8.153c.977 0 1.767-.789 1.767-1.765V1.764c0-.975-.789-1.765-1.765-1.765z"/></symbol>
  <symbol id="i-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 11.04"><path d="M6 2a3.15 3.15 0 012.84-2A3.32 3.32 0 0112 3.25a3.12 3.12 0 01-.1 1.23 5.36 5.36 0 01-1.66 2.76L6 11 1.78 7.24A5.43 5.43 0 01.12 4.48 3.12 3.12 0 010 3.25 3.33 3.33 0 013.16 0 3 3 0 016 2z"/></symbol>
  <symbol id="i-instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 46.1c68.4 0 76.5.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9C71.5 20 57.2 28.7 43 43 28.7 57.2 20 71.5 13.4 88.3c-6.3 16.3-10.7 34.9-11.9 62.1C.3 177.8 0 186.5 0 256s.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1C20 440.5 28.7 454.8 43 469c14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9C334.2.3 325.5 0 256 0z"/><path d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5S183.4 387.5 256 387.5 387.5 328.6 387.5 256 328.6 124.5 256 124.5zm0 216.8c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3zm167.4-222c0 16.955-13.745 30.7-30.7 30.7S362 136.255 362 119.3s13.745-30.7 30.7-30.7 30.7 13.745 30.7 30.7z"/></symbol>
  <symbol id="i-linkedin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.263 27.269h-4.739v-7.425c0-1.771-.036-4.049-2.469-4.049-2.471 0-2.848 1.927-2.848 3.919v7.556h-4.739V12.001h4.552v2.081h.061c.636-1.2 2.183-2.467 4.493-2.467 4.801 0 5.689 3.16 5.689 7.273v8.381zM7.116 9.911a2.75 2.75 0 01-2.751-2.753 2.752 2.752 0 112.751 2.753zm2.376 17.358H4.74V12h4.752v15.269zM29.633 0H2.361C1.056 0 0 1.032 0 2.305v27.389c0 1.275 1.056 2.305 2.361 2.305h27.268c1.304 0 2.371-1.031 2.371-2.305V2.305C32 1.032 30.933 0 29.629 0h.004z"/></symbol>
  <symbol id="i-mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 32"><path d="M39.269 32a4.372 4.372 0 004.363-4.363V4.364A4.372 4.372 0 0039.269.001H4.363A4.372 4.372 0 000 4.364v23.273A4.372 4.372 0 004.363 32h34.906zM4.363 1.457h34.906a2.91 2.91 0 012.906 2.906v23.273a2.91 2.91 0 01-2.906 2.906H4.363a2.91 2.91 0 01-2.906-2.906V4.363a2.91 2.91 0 012.906-2.906zm17.803 19.686c1.79 0 3.468-.75 4.721-2.113L38.153 6.707a.735.735 0 00-.043-1.031.727.727 0 00-1.031.043L25.813 18.05c-1.943 2.113-5.352 2.113-7.295 0L7.235 5.71a.73.73 0 10-1.074.988l11.283 12.34c1.253 1.355 2.932 2.105 4.721 2.105zM6.698 26.938c.17 0 .349-.06.494-.187l9.92-9.059c.298-.273.315-.733.043-1.023s-.733-.315-1.031-.043l-9.92 9.042a.72.72 0 00-.043 1.023.722.722 0 00.537.247zm30.944 0a.743.743 0 00.537-.239.725.725 0 00-.043-1.023l-9.937-9.067c-.298-.273-.75-.256-1.023.043s-.256.758.043 1.023l9.928 9.059a.698.698 0 00.494.205z"/></symbol>
  <symbol id="i-twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.939 6.092a13.31 13.31 0 01-3.767 1.033 6.613 6.613 0 002.884-3.631 13.55 13.55 0 01-4.169 1.579A6.56 6.56 0 0015.539 9.55c0 .52.06 1.02.169 1.499-5.453-.257-10.287-2.876-13.521-6.835a6.432 6.432 0 00-.888 3.3 6.56 6.56 0 002.917 5.461 6.554 6.554 0 01-2.971-.821v.081a6.564 6.564 0 005.261 6.436 6.663 6.663 0 01-2.949.113 6.582 6.582 0 006.139 4.556 13.156 13.156 0 01-8.136 2.807c-.52 0-1.039-.031-1.56-.089a18.657 18.657 0 0010.076 2.945c12.072 0 18.665-9.995 18.665-18.648 0-.279 0-.56-.02-.84 1.281-.919 2.4-2.08 3.28-3.397l-.063-.027z"/></symbol>
  <symbol id="i-youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.327 8.273a4.026 4.026 0 00-2.756-2.777l-.028-.007c-2.493-.668-12.528-.668-12.528-.668s-10.009-.013-12.528.668A4.026 4.026 0 00.71 8.245l-.007.028C.26 10.554.007 13.176.007 15.858v.163-.008.126c0 2.682.253 5.304.737 7.845l-.041-.26a4.026 4.026 0 002.756 2.777l.028.007c2.491.669 12.528.669 12.528.669s10.008 0 12.528-.669a4.026 4.026 0 002.777-2.756l.007-.028c.425-2.233.668-4.803.668-7.429l-.001-.297v.015l.001-.31c0-2.626-.243-5.196-.708-7.687l.04.258zM12.812 20.801V11.21l8.352 4.803z"/></symbol>
  <symbol id="i-blog" xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 512 511"><path d="M67.18 48.395h-.102c-5.523 0-10 4.476-10 10 0 5.523 4.477 10 10 10h.102c5.523 0 10-4.477 10-10 0-5.524-4.477-10-10-10zm0 0M116.71 48.395h-.1c-5.524 0-10 4.476-10 10 0 5.523 4.476 10 10 10h.1c5.524 0 10-4.477 10-10 0-5.524-4.476-10-10-10zm0 0M166.242 48.395h-.101c-5.524 0-10 4.476-10 10 0 5.523 4.476 10 10 10h.101c5.524 0 10-4.477 10-10 0-5.524-4.476-10-10-10zm0 0M444.309 48.395h-192.93c-5.524 0-10 4.476-10 10 0 5.52 4.476 10 10 10h192.93c5.523 0 10-4.48 10-10 0-5.524-4.477-10-10-10zm0 0M262.89 452.438a10.1 10.1 0 00-7.07 2.93c-1.86 1.859-2.93 4.44-2.93 7.07s1.07 5.21 2.93 7.07c1.871 1.86 4.442 2.93 7.07 2.93s5.212-1.07 7.07-2.93c1.868-1.86 2.93-4.442 2.93-7.07s-1.062-5.211-2.93-7.07a10.08 10.08 0 00-7.07-2.93zm0 0"/><path d="M480.23.5H31.77C14.254.5 0 14.754 0 32.27v408.398c0 17.52 14.254 31.77 31.77 31.77H221c5.523 0 10-4.477 10-10s-4.477-10-10-10H31.77c-6.489 0-11.77-5.278-11.77-11.77V116.289h472v324.379c0 6.488-5.281 11.77-11.77 11.77H303.668c-5.523 0-10 4.476-10 10s4.477 10 10 10H480.23c17.516 0 31.77-14.25 31.77-31.77V32.27C512 14.754 497.746.5 480.23.5zM20 96.285V32.27c0-6.489 5.281-11.77 11.77-11.77h448.46c6.489 0 11.77 5.281 11.77 11.77v64.02H20zm0 0"/><path d="M178.04 230.5c0-19.852-16.15-36-36-36H108.37c-5.523 0-10 4.477-10 10v104c0 5.523 4.477 10 10 10h33.668c19.852 0 36-16.148 36-36 0-10.215-4.281-19.441-11.14-26 6.859-6.559 11.14-15.785 11.14-26zm-20 52c0 8.82-7.18 16-16 16H118.37v-32h23.668c8.82 0 16 7.176 16 16zm-39.669-36v-32h23.668c8.824 0 16 7.18 16 16s-7.176 16-16 16zm0 0M206.648 194.5c-5.523 0-10 4.477-10 10v80.871c0 18.27 14.864 33.129 33.13 33.129 5.523 0 10-4.477 10-10s-4.477-10-10-10c-7.239 0-13.13-5.89-13.13-13.129V204.5c0-5.523-4.476-10-10-10zm0 0M324.867 282.29c0-19.97-16.242-36.216-36.21-36.216s-36.212 16.246-36.212 36.215 16.246 36.211 36.211 36.211c19.969 0 36.211-16.242 36.211-36.21zm-52.422 0c0-8.942 7.274-16.216 16.211-16.216s16.211 7.274 16.211 16.215c0 8.938-7.27 16.211-16.21 16.211s-16.212-7.273-16.212-16.21zm0 0M377.414 346.5c-8.937 0-16.21-7.273-16.21-16.21 0-5.524-4.477-10-10-10s-10 4.476-10 10c0 19.968 16.245 36.21 36.21 36.21 19.969 0 36.215-16.242 36.215-36.21v-48c0-19.97-16.246-36.216-36.215-36.216-19.965 0-36.21 16.246-36.21 36.215s16.245 36.211 36.21 36.211c5.828 0 11.332-1.39 16.215-3.848v15.637c0 8.938-7.274 16.211-16.215 16.211zm0-48c-8.937 0-16.21-7.273-16.21-16.21 0-8.942 7.273-16.216 16.21-16.216 8.941 0 16.215 7.274 16.215 16.215 0 8.938-7.274 16.211-16.215 16.211zm0 0M108.371 416.5H403.63c5.523 0 10-4.477 10-10s-4.477-10-10-10H108.37c-5.52 0-10 4.477-10 10s4.48 10 10 10zm0 0"/></symbol>
  <symbol id="i-github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#212121" d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"/></symbol>
</svg>

about.json

"assets": {
  "icons": "assets/icons.svg"
},

但这也没有生效。

尝试显示 FontAwesome 图标的代码如下：

<svg class="fa d-icon d-icon-linkedin svg-icon svg-node" aria-hidden="true">
  <use xlink:href="#fab-linkedin"></use>
</svg>

自定义图标的代码如下：

<svg class="fa d-icon d-icon-facebook svg-icon svg-node" aria-hidden="true">
  <use xlink:href="#i-facebook"></use>
</svg>

我正在使用 theme-creator.discourse.org，在查找 sprite 时，我发现了这个：

data-svg-sprite-path="/svg-sprite/theme-creator.discourse.org/svg-3672-f683dca15466be00000f7a819b09dd65f3e78e11.js

这是 sprite 的内容：https://gist.github.com/derevandal/93a28cff06b4c6ae67d46381aec2bca7

然而，在其中既没有 FA 图标，也没有自定义图标。

我需要做什么才能正确放置图标？

有人能帮我解决这个问题吗？

谢谢 <3

2 个赞
122

我认为变量名必须是 icons-sprite，请参见置顶帖 :up_arrow:
通过图形界面将精灵图上传到主题组件对我来说非常顺利。

4 个赞
123

我正在寻找 Font Awesome 5 中的 特定图标，但我的 Discourse 安装中似乎没有该图标（该安装在一周内已更新）。捆绑的 Font Awesome 图标多久更新一次？

2 个赞
124

这是一个专业版 FA 图标，您只能在 Discourse 中通过插件使用它（核心版本不支持非免费的 FontAwesome 图标）。不过，您可以尝试使用这个插件：FontAwesome Pro 图标。

7 个赞
125

感谢 @pmusaraj！我会查看那个插件！:folded_hands:

2 个赞