# 如何用自定义图标替换现有SVG图标？

**URL:** <https://meta.discourse.org/t/how-to-replace-an-existing-svg-icon-with-a-custom-one/277743>\
**Category:** Development\
**Created:** [2021 年3 月 14 日 17:18 UTC](https://meta.discourse.org/t/how-to-replace-an-existing-svg-icon-with-a-custom-one/277743 "2021-03-14T17:18:47Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

作者： ![Phlipups](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phlipups/32/210729_2.png) [@Phlipups](https://meta.discourse.org/u/Phlipups)\
发布日期： [2021 年3 月 14 日 17:18 UTC](https://meta.discourse.org/t/how-to-replace-an-existing-svg-icon-with-a-custom-one/277743/1 "2021-03-14T17:18:47Z")

</div>

所以我在一个关于将“点赞”图标更改为“竖起大拇指”图标的组件的帖子中提出了这个问题。很抱歉再次提起这个话题，但我完全困惑了。

我想做的是使用来自这里的自定义“点赞”图标 - [Font Awesome](https://fontawesome.com/icons/pig?style=solid)，并将轮廓版本用作“未点赞”图标。这可行吗？由于这是一个专业版图标，我是否需要下载它，或者自己制作并作为自定义图标或表情符号添加，然后将其应用到“点赞”图标组件上？我也不确定该怎么做。

我已经安装并测试了“更改点赞图标”组件，在一个未使用的主题上测试过，它确实按预期工作。

我猜测，如果你想使用自定义图标，就不能同时使用该组件，因为“竖起大拇指”似乎会覆盖所有内容。所以我移除了它，并在该主题的自定义 HTML 的 Header 区域添加了以下代码：

```plaintext
      api.replaceIcon('d-liked', 'fa-pig');
      api.replaceIcon('d-unliked', 'fal-pig');
      api.replaceIcon('notification.liked', 'fa-pig');
      api.replaceIcon('notification.liked_2', 'fa-pig');
      api.replaceIcon('notification.liked_many', 'fa-pig');
      api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
      api.replaceIcon('d-unliked', 'fal-pig');
      api.replaceIcon('notification.liked', 'fa-pig');
      api.replaceIcon('notification.liked_2', 'fa-pig');
      api.replaceIcon('notification.liked_many', 'fa-pig');
      api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
      api.replaceIcon('heart', 'fa-pig');

```

在 SVG 图标子集中，我添加了 fa-pig 和 fal-pig，但预览时点赞图标是空白的。我猜这是因为我没有实际安装猪图标。所以我尝试了存钱罐图标，据说是免费的，并将其添加到图标子集中，但点赞图标仍然是空白的。

显然，我哪里做错了。我尝试上传一个名为 icons-sprite 的 SVG 资产到这个测试主题，它允许我上传一个，但我不能将两个不同的上传命名为相同的变量名 Icons-sprite。无论如何，即使只上传一个，图标仍然是空白的。

我在 IT 行业工作，但在编程这些高级的 Discourse 后端内容方面，我完全是个新手。

任何帮助都将不胜感激，谢谢。

---

_[View the full topic](https://meta.discourse.org/t/how-to-replace-an-existing-svg-icon-with-a-custom-one/277743)._