如何仅使用 CSS 将屏幕截图中的文本替换为任何其他 SVG 图标（任意）？
非常感谢！
您需要先在“上传”部分上传您的 SVG 文件。对于 SCSS 变量名，请使用简短精炼的名称。
然后，将以下内容添加到“Common”选项卡：
th.posts.sortable.num.topic-list-data {
content: url($name-of-variable);
}
请注意，您不应在 url 括号内添加引号。
4 个赞
Don 创建了一个用于在 CSS 中使用图标的辅助工具：
5 个赞
抱歉，我不明白。您说的 $name-of-variable 是什么意思？我正尝试在 content: 后面添加 SVG 代码，但它不起作用。
1 个赞
非常感谢 @Canapin，但我不想安装更多组件来用 SVG 代码更改单词“replies”。 
变量名是您上传 SVG 文件时输入的名称。
您需要是管理员才能执行此操作。
- 前往论坛上的
/admin。 - 在边栏的“自定义”部分下选择“组件”并创建一个新的组件。
- 在组件页面底部的“上传”下上传 SVG 文件。
- 为变量选择一个名称（在上传文件模态框中）
- 使用我帖子中的代码：
- 将
name-of-variable替换为您在第 4 步中选择的名称。在变量名前保留$。 - 您可以开始了！
3 个赞
非常感谢，现在非常清楚了。
快速提问：如果我有比如说 10 个图标，我需要一个一个上传吗？
是的，我相信你会的。
2 个赞
@Radu 如果我的指南不起作用，您可以遵循此指南，我认为您只需上传一个文件即可获得多个图标：
3 个赞
这是一篇很棒的文章，它帮助我替换了默认图标。如果可以的话，还有一件事……
在下面的代码中，我该如何在 content 中放置一个 FontAwsome 图标？
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;
}
您可以将其下载为 SVG，然后执行相同的操作。否则，您将不得不创建一个组件，这将更加复杂。
1 个赞
所以没有办法做类似这样的事情？
content:'fa d-icon d-icon-reply';
如果不行，下面的方法代码应该是什么样的？我只需要一个例子作为开始，因为我尝试了基本的 CSS 但没有效果。
非常感谢！
不，但是你可以使用与之前方法相同的方法。上传它，然后按照指南将其添加为 SVG 文件；
我不确定您想把图标放在哪里。您能发一张截图吗？
谢谢。
没关系，我只想在 content:'...' 行内放置一个 FA 图标。
我想我会选择 FA 作为字体系列，并在 content 方法中使用 Unicode。
您可以这样做：
我不能100%确定这是否有效，但我相当确定它有效。
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.