介绍 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

Hi there! I was wondering if it would be possible to add a custom icon into a theme component.

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

We are looking to use the above component to have categories%20icon be a linked icon in our instance’s header.

Even after examining the instructions both here and in the related topic, I’m still a tad confused as to how I might go about doing this.

2 个赞
109

I have updated the “Adding custom icons” section in the OP @justin.noom, it might be easier to follow the steps now.

5 个赞
110

Thank you @pmusaraj! :smiley:

So, if I were to upload a .svg entitled test.svg to the component and then add test to svg_icons - it would then show up properly?

1 个赞
111

Not quite. The uploaded file should be an SVG sprite. Its name doesn’t matter, but it’s important that the symbols it contains have IDs, which you can then use in the components that accept icons (iconified header links, tag icons, category icons, etc.). Make sure you look at the example SVG sprite in the OP.

2 个赞
112

Would the settings depicted below properly represent that?

Current component settings:

svg
svg759×434 10.4 KB

Sprite used:

noom-info

Result:

results

1 个赞
113

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

fontawesome
fontawesome890×642 43.4 KB

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

2 个赞
114

Unfortunately I didn’t initially compile it - is there any software you might recommend that could check/edit that information?

1 个赞
115

You can do it by hand, SVGs are XML. A quick Google search gave this useful link: SVG `symbol` a Good Choice for Icons | CSS-Tricks (the sample file in the OP is also very easy to read, it only has two symbols).

5 个赞
116

That looks like an awesome resource, thank you!

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 个赞