# 个人资料中的可点击社交图标链接

**URL:** https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136
**Category:** Theme component
**Created:** [2020 年7 月 18 日 17:03 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136 "2020-07-18T17:03:21Z")
**Posts on this page:** 20
**Page:** 5

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2024 年11 月 26 日 23:30 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/83 "2024-11-26T23:30:18Z")

</div>

Tiktok 需要 @，Youtube 使用论坛的网址 🤷‍♂️

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2024 年11 月 26 日 23:37 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/84 "2024-11-26T23:37:29Z")

</div>

我不使用 TikTok - 你有可以用来试验的用户名示例吗？

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2024 年11 月 26 日 23:39 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/85 "2024-11-26T23:39:12Z")

</div>

嗯，我的用户名是 jagster64——这个用户名很安全，因为我不会发布内容。

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2024 年11 月 27 日 00:18 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/86 "2024-11-27T00:18:56Z")

</div>

已修复 - 已添加到拉取请求

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2024 年11 月 27 日 00:45 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/87 "2024-11-27T00:45:41Z")

</div>

提交了添加 Strava 支持的拉取请求 - 希望 @weallwegot 能容忍我稍微混乱的拉取请求 :-s

---

<div class="post-metadata">

### Author: ![Roi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roi/32/130587_2.png) [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [2024 年12 月 1 日 11:16 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/88 "2024-12-01T11:16:53Z")

</div>

嗯，temporary-twitter-x 已改回 fab-twitter。这是故意的还是错误的？无论如何，旧的 Twitter 鸟又回来了，而不是新的 X 标志。

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2024 年12 月 1 日 11:36 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/89 "2024-12-01T11:36:15Z")

</div>

感谢您的指正——我已创建一个拉取请求以更新其至 Twitter 的品牌重塑。

---

<div class="post-metadata">

### Author: ![Roi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roi/32/130587_2.png) [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [2024 年12 月 1 日 11:55 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/90 "2024-12-01T11:55:30Z")

</div>

谢谢！但不幸的是，您需要将 fa-x-twitter 更改为 temporary-twitter-x，因为 fa-x-twitter 是 Fontawesome 6，Discourse 目前尚不支持。

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2024 年12 月 1 日 12:38 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/91 "2024-12-01T12:38:50Z")

</div>

> [@Roi](#):
>
> Fontawesome 6，它目前在 Discourse 中不起作用。

我认为它应该可以工作

> [@We're upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349?u=moin):
>
> What’s Font Awesome? Discourse uses a free set of icons from [Font Awesome](https://fontawesome.com/) throughout its interface. You see these on toolbars, badges, buttons, etc… here’s our composer toolbar: [image] Since 2018 we’ve been using Font Awesome 5 ([original announcement](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643)), and in the meantime Font Awesome 6 has been released. Version 6 includes new icons, some general style updates, and renames. As of today, Discourse will start using version 6 too! Specifically, [version 6.6.0](https://fontawesome.com/versions). This isn’t an enormous visual ch…

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2024 年12 月 1 日 12:43 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/92 "2024-12-01T12:43:24Z")

</div>

更新了正确的 X 图标……要知道，每一位品牌和营销专家都感到一阵寒意，但又说不出原因

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2024 年12 月 1 日 13:16 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/93 "2024-12-01T13:16:05Z")

</div>

已完成一些测试 - 可以确认 FA6 图标有效 - 拉取请求已更新

---

<div class="post-metadata">

### Author: ![Roi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roi/32/130587_2.png) [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [2024 年12 月 1 日 17:05 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/94 "2024-12-01T17:05:27Z")

</div>

是的，很有趣，Fontawesome 6 现在似乎可以在 Discourse 中使用了！🙂

有了正确的图标，我也能看到了。太棒了！非常感谢！

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [2025 年4 月 8 日 20:07 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/95 "2025-04-08T20:07:05Z")

</div>

您好，是否可以添加自定义 SVG 而不是 FontAwesome 中的 SVG，就像 [Custom Header Links (icons)](https://meta.discourse.org/t/custom-header-links-icons/86307) 中允许的那样？

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [2025 年4 月 8 日 20:29 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/96 "2025-04-08T20:29:51Z")

</div>

> [@weallwegot](#):
>
> 我建议不要显示带有图标的自定义用户字段，因为它会使文本和可点击图标显得有些多余。

像这样吗？

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/6/8/468def67c3512dd4c4e8b5c4e62cff005b07387f.png)

我刚刚意识到取消选择“在公共个人资料上显示”会按预期从公共个人资料中删除用户字段，但此主题组件提供的图标行为更加不稳定：

- 在我的管理员帐户中，我仍然可以看到图标
- 在我的测试帐户（信任级别 1）中，图标也会消失

换句话说，对于大多数登录用户和所有匿名用户，自定义用户字段图标仅在相应的标签和文本值可见时才可见。隐藏一个会隐藏另一个。

这很奇怪，但我尝试了不同的浏览器、隐身窗口，并且可以可靠地重现此问题。是否有人也能重现此问题？

这是管理员容易忽略的事情之一。直到用户报告了一个问题，我才意识到这种行为。

如果有所帮助，我正在使用 Mastodon 图标进行测试。

---

<div class="post-metadata">

### Author: ![jenmck](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jenmck/32/332487_2.png) [@jenmck](https://meta.discourse.org/u/jenmck)
#### Post date: [2025 年12 月 21 日 20:45 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/97 "2025-12-21T20:45:29Z")

</div>

我遇到了一个问题，链接无法正确导航到用户的社交媒体个人资料。看起来它只是将您当前所在的页面的 URL 与自定义用户字段附加在一起。

到目前为止，我已经在 Steam 和 Discord 上注意到了这一点。

查看 [links-settings.js](https://github.com/weallwegot/discourse-social-links-clickable/blob/master/javascripts/discourse/services/links-settings.js) 中的 github 仓库，Steam 和 Discord 没有 `base:` 或 `baseregex:` 行……Bluesky 和 Twitter（抱歉，是“万物应用”X）工作正常，它们同时拥有这两行，所以这可能是问题所在？

```plaintext
{
        name: "Discord",
        icon: "fab-discord",
        link: {
          value: settings.discord_custom_field_name,
        },
      },
      {
        name: "Steam",
        icon: "fab-steam",
        link: {
          value: settings.steam_custom_field_name,
        },
      },

```

对于 Bluesky：

```plaintext
{
        name: "Bluesky",
        icon: "fab-bluesky",
        link: {
          value: settings.bluesky_custom_field_name,
          base: "https://bsky.app/profile/",
          baseregex: "^http(s)?://(www.)?bsky.app/profile/",
        },
      },

```

对于 Twitter：

```plaintext
{
        name: "X",
        icon: "fab-twitter",
        link: {
          value: settings.twitter_custom_field_name,
          base: "https://twitter.com/",
          baseregex: "^http(s)?://(www.)?twitter.com/",
        },
      },

```

快速浏览了其余的条目，看起来这些也没有 `base:` 或 `baseregex:` 行，但我没有它们的实时示例来测试。

- 电子邮件
- Mastodon
- Discord
- Steam
- LinkedIn
- Bandcamp

（编辑以添加）我已经创建了一个 [pull request](https://github.com/weallwegot/discourse-social-links-clickable/pull/22)：  
[09096b8](https://github.com/weallwegot/discourse-social-links-clickable/pull/22/commits/09096b8726cf03f28ae6858acf5d2c6f9185b577)：为电子邮件、Steam 和 LinkedIn 添加基础 URL  
[0ec40a0](https://github.com/weallwegot/discourse-social-links-clickable/pull/22/commits/0ec40a0c30cff19c5e32550cc458fe46034b47a2)：添加了 Discord、Bandcamp 和 Mastodon，并更新了自述文件。我单独做了这个，因为 Bandcamp 和 Mastodon 的基础 URL 会根据用户而有所不同，它们不一致；对于 Discord，用户输入的是他们的用户 ID 而不是用户名，所以我觉得需要在自述文件中解释一下。

---

<div class="post-metadata">

### Author: ![long](https://avatars.discourse-cdn.com/v4/letter/l/e47774/32.png) [@long](https://meta.discourse.org/u/long)
#### Post date: [2026 年2 月 20 日 01:59 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/98 "2026-02-20T01:59:40Z")

</div>

创建了与我想要使用的匹配的自定义用户字段。只显示了其中几个图标，但同时也在个人资料卡底部显示了社交名称和网址。我该如何避免这种情况并确保所有图标都显示出来？应该将 Facebook 图标更新为：`fab-facebook-f`，并将 Twitter 重命名为 X，并使用此图标：`fab-x-twitter`，……并添加 Snapchat，使用此图标：`fab-snapchat`

需要将 Twitter 更改为 X（网址和图标）……不确定为什么它们也显示为文本。请看这里：

 ![Screenshot 2026-02-19 at 9.20.17 PM](https://global.discourse-cdn.com/meta/original/4X/5/d/a/5daa5bc29e2e1cdd1b2aa853e6c0127b0cb78d45.png)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2026 年2 月 20 日 08:31 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/99 "2026-02-20T08:31:18Z")

</div>

> [@weallwegot](#):
>
> 我建议让带有图标的自定义用户字段_不要_显示在用户卡上，因为这样文本和可点击的图标会感觉有点多余。

您是否已将该用户字段配置为在用户卡上显示？

 ![Screenshot_20260220_093102_Firefox](https://global.discourse-cdn.com/meta/original/4X/8/2/4/824ee3ce7dd5d5a77d015d98a289915770f5a1e0.jpeg)

---

<div class="post-metadata">

### Author: ![long](https://avatars.discourse-cdn.com/v4/letter/l/e47774/32.png) [@long](https://meta.discourse.org/u/long)
#### Post date: [2026 年2 月 20 日 11:32 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/100 "2026-02-20T11:32:27Z")

</div>

非常有帮助，谢谢。

---

<div class="post-metadata">

### Author: ![long](https://avatars.discourse-cdn.com/v4/letter/l/e47774/32.png) [@long](https://meta.discourse.org/u/long)
#### Post date: [2026 年2 月 20 日 12:22 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/101 "2026-02-20T12:22:21Z")

</div>

好的，对于想要将 Twitter 更新为 X（包括图标和 URL）的用户，请遵循以下步骤。

1. 转到 管理 \> 外观 \> 主题和组件 \> 组件 \> 安装 \> 创建新的

2. 将此代码添加到 CSS 选项卡（将“XXXXX”替换为您的 @ 用户名）：

```plaintext
/* 1. 隐藏原始的 Twitter SVG 图标 */
a[href="https://twitter.com/XXXXX"] svg.d-icon-fab-twitter,
a[href="https://x.com/XXXXX"] svg.d-icon-fab-twitter {
    display: none;
}

/* 2. 使用伪元素和 CSS 遮罩注入 X 图标 */
a[href="https://twitter.com/XXXXX"]::before,
a[href="https://x.com/XXXXX"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,\u003csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"\u003e\u003cpath d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/\u003e\u003c/svg\u003e') no-repeat center;
    mask: url('data:image/svg+xml;utf8,\u003csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"\u003e\u003cpath d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/\u003e\u003c/svg\u003e') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

```

1. 将此代码添加到 `<head>` 选项卡（将“XXXXX”替换为您的 @ 用户名）：

```plaintext
<script>
// 创建一个查找并更改链接的函数
function updateTwitterLinks() {
    const oldLinks = document.querySelectorAll('a[href="https://twitter.com/XXXXX"]');
    oldLinks.forEach(link => {
        link.href = 'https://x.com/XXXXX';
    });
}

// 1. 尝试立即运行它，以防万一
updateTwitterLinks();

// 2. 设置一个“观察者”来观察动态加载的内容（例如 Discourse 帖子）
const observer = new MutationObserver(function(mutations) {
    updateTwitterLinks();
});

// 开始观察整个页面的 body 以获取新添加的元素
observer.observe(document.body, { childList: true, subtree: true });
</script>

```

完成。

---

<div class="post-metadata">

### Author: ![Roi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roi/32/130587_2.png) [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [2026 年7 月 18 日 09:59 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/102 "2026-07-18T09:59:50Z")

</div>

我更新了 Discourse，并遇到了一些提示：

> **[管理员提示]** 主题 [‘discourse-social-links-clickable’](https://forum.gdngs.de/admin/customize/themes/11?safe_mode=no_themes) 包含需要更新的代码。（ID：discourse.native-array-extensions.filterBy）

以及在开发者控制台中：

`deprecated.js:54 [主题 11 'discourse-social-links-clickable'] 弃用提示：array.filterBy 是一个已弃用的 Ember 原生数组扩展。请使用原生数组方法或 TrackedArray 代替。[自 Discourse 3.6.0.beta1-dev 起弃用] [弃用 ID：discourse.native-array-extensions.filterBy]`

[Previous page](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136.md?page=4)

[Next page](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136.md?page=6)