# 从文本到图标
**URL:** https://meta.discourse.org/t/from-text-to-icon/345840
**Category:** Support
**Created:** [2025年一月6日 16:15 UTC](https://meta.discourse.org/t/from-text-to-icon/345840 "2025-01-06T16:15:03Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@Radu](https://meta.discourse.org/u/Radu)
#### Post date: [2025年一月6日 16:15 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/1 "2025-01-06T16:15:03Z")
如何仅使用 CSS 将屏幕截图中的文本替换为任何其他 SVG 图标（任意）？
非常感谢！😝
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月6日 23:27 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/2 "2025-01-06T23:27:28Z")
您需要先在“上传”部分上传您的 SVG 文件。对于 SCSS 变量名，请使用简短精炼的名称。
然后，将以下内容添加到“Common”选项卡：
```css
th.posts.sortable.num.topic-list-data {
content: url($name-of-variable);
}
```
请注意，您不应在 url 括号内添加引号。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025年一月7日 01:04 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/3 "2025-01-07T01:04:39Z")
Don 创建了一个用于在 CSS 中使用图标的辅助工具：
> [@Discourse Easy 'SVG Icon' and 'Emoji' in CSS](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656?u=cocoquark):
>
> Hello wave This topic contain two theme component. Discourse Easy SVG Icon CSSwarning This theme component is functional as a template, please fork it on Github or use the code to your project. You can remove the icons svg codes from the SCSS and only keep those what you really actually use… I have imported the mixin file to the common.scss file so you can add your code below that line or separately to the desktop or mobile section. The theme component add the ability to keep the SVG…
---
### Author:  [@Radu](https://meta.discourse.org/u/Radu)
#### Post date: [2025年一月7日 10:51 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/4 "2025-01-07T10:51:39Z")
抱歉，我不明白。您说的 _$name-of-variable_ 是什么意思？我正尝试在 `content:` 后面添加 SVG 代码，但它不起作用。🙆♂️
---
### Author:  [@Radu](https://meta.discourse.org/u/Radu)
#### Post date: [2025年一月7日 10:56 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/5 "2025-01-07T10:56:47Z")
非常感谢 @Canapin，但我不想安装更多组件来用 SVG 代码更改单词“replies”。 😃
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月7日 11:11 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/6 "2025-01-07T11:11:54Z")
变量名是您上传 SVG 文件时输入的名称。
> ⚠ 您需要是管理员才能执行此操作。
* * *
1. 前往论坛上的 `/admin`。
2. 在边栏的“自定义”部分下选择“组件”并创建一个新的组件。
3. 在组件页面底部的“上传”下上传 SVG 文件。
4. 为变量选择一个名称（在上传文件模态框中）
5. 使用我帖子中的代码：
> [@NateDhaliwal](#):
>
> ```css
> th.posts.sortable.num.topic-list-data {
> content: url($name-of-variable);
> }
>
> ```
1. 将 `name-of-variable` 替换为您在第 4 步中选择的名称。在变量名前保留 `$`。
2. 您可以开始了！
---
### Author:  [@Radu](https://meta.discourse.org/u/Radu)
#### Post date: [2025年一月8日 12:35 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/7 "2025-01-08T12:35:45Z")
非常感谢，现在非常清楚了。
快速提问：如果我有比如说 10 个图标，我需要一个一个上传吗？
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月8日 13:31 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/8 "2025-01-08T13:31:16Z")
是的，我相信你会的。
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月8日 13:35 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/9 "2025-01-08T13:35:13Z")
@Radu 如果我的指南不起作用，您可以遵循此指南，我认为您只需上传一个文件即可获得多个图标：
> [@Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736):
>
> You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them [within a theme or theme component.](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7)Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the \ tag contents from the original SVG icon file into \ …
---
### Author:  [@Radu](https://meta.discourse.org/u/Radu)
#### Post date: [2025年一月13日 12:02 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/10 "2025-01-13T12:02:53Z")
这是一篇很棒的文章，它帮助我替换了默认图标。如果可以的话，还有一件事……
在下面的代码中，我该如何在 `content` 中放置一个 FontAwsome 图标？
```plaintext
th.topic-list-data.posts.num > span {
visibility: hidden;
}
th.topic-list-data.posts.num > span:after {
content:'在此处放置 FontAwesome 图标';
visibility: visible;
display: inline-block;
padding-bottom: 1.2em;
}
```
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月13日 13:09 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/11 "2025-01-13T13:09:29Z")
您可以将其下载为 SVG，然后执行相同的操作。否则，您将不得不创建一个组件，这将更加复杂。
---
### Author:  [@Radu](https://meta.discourse.org/u/Radu)
#### Post date: [2025年一月13日 14:00 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/12 "2025-01-13T14:00:31Z")
所以没有办法做类似这样的事情？
```plaintext
content:'fa d-icon d-icon-reply';
```
如果不行，下面的方法代码应该是什么样的？我只需要一个例子作为开始，因为我尝试了基本的 CSS 但没有效果。
> [@NateDhaliwal](#):
>
> 你可以将其下载为 SVG，然后做同样的事情。
非常感谢！
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月13日 23:12 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/13 "2025-01-13T23:12:02Z")
> [@Radu](#):
>
> `content:'fa d-icon d-icon-reply'; `
不，但是你可以使用与之前方法相同的方法。上传它，然后按照指南将其添加为 SVG 文件；
> [@Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736):
>
> You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them [within a theme or theme component.](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7)Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the \ tag contents from the original SVG icon file into \ …
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月13日 23:12 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/14 "2025-01-13T23:12:58Z")
> [@Radu](#):
>
> 如果不是，那么以下方法的代码看起来会是怎样的？我只需要一个示例来开始，因为我尝试了基本的 CSS 并且没有任何效果。
我不确定您想把图标放在哪里。您能发一张截图吗？
谢谢。
---
### Author:  [@Radu](https://meta.discourse.org/u/Radu)
#### Post date: [2025年一月14日 11:01 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/15 "2025-01-14T11:01:50Z")
没关系，我只想在 `content:'...'` 行内放置一个 FA 图标。
我想我会选择 FA 作为字体系列，并在 `content` 方法中使用 Unicode。
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2025年一月14日 11:05 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/16 "2025-01-14T11:05:59Z")
您可以这样做：
> [@NateDhaliwal](#):
>
> ```css
> th.posts.sortable.num.topic-list-data {
> content: url($name-of-variable);
> }
>
> ```
我不能100%确定这是否有效，但我_相当_确定它有效。
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2025年二月13日 11:06 UTC](https://meta.discourse.org/t/from-text-to-icon/345840/17 "2025-02-13T11:06:18Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.