# 让标签看起来像真实世界的标签

**URL:** https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237
**Category:** UX
**Created:** [2018年十月23日 07:40 UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237 "2018-10-23T07:40:38Z")
**Posts on this page:** 1
**Showing post:** 11

<div class="post-metadata">

### Author: ![HeyRR](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heyrr/32/192157_2.png) [@HeyRR](https://meta.discourse.org/u/HeyRR)
#### Post date: [2020年八月2日 21:35 UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/11 "2020-08-02T21:35:41Z")

</div>

> [@Making tags look like real world tags](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/8?u=heyrr):
>
> Alternatively, to restyle the bullet to a tag icon: .discourse-tag.bullet::before { font-size: 1.0em; top: 0em; margin-right: 3px; content: "\f02b"; color: #ccc; } for: [21]

此处的解决方案似乎已不再适用，有一个更新版本：

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/8/6830b3c5c8d121071fc5d187465dd930b3ad386c.png)

（请注意，这是针对标签类型为“项目符号”的情况，因此如果您原本使用的是其他样式，CSS 选择器会有所不同。）

```css
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.discourse-tag.bullet::before {
    top: 0em;
    margin-right: 5px;
    content: "\f02b";
    color: #bbbdbb;
    background: none;
    height: 16px; /* 您可能需要针对移动视图对此进行微调 */
  
    font-weight: 900;
    font-size: 0.9em;
    font-family: "Font Awesome 5 Free"; /* 这是正确的字体族 */
}

```

或者，为了减少加载整个 `https://use.fontawesome.com/releases/v5.13.0/css/all.css` 带来的不必要开销，您可以移除该 `@import` 行，并使用 SVG 作为内容：

```css
   content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="10" width="10" ><path fill="grey" d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>');

```

您可以在这里找到所有 SVG：

> **[GitHub - Rush/Font-Awesome-SVG-PNG: Font Awesome split to individual SVG and PNG files...](https://github.com/Rush/Font-Awesome-SVG-PNG)**
>
> Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator

---

_[View the full topic](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237)._