# Discourse CSS 中轻松使用 'SVG Icon' 与 'Emoji'

**URL:** <https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656>\
**Category:** Development\
**Created:** [2024 年3 月 23 日 14:29 UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656 "2024-03-23T14:29:09Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2024 年3 月 23 日 14:29 UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/1 "2024-03-23T14:29:09Z")

</div>

```html
<div data-theme-toc="true"> </div>

```

你好 👋

此主题包含两个主题组件。

## Discourse Easy SVG Icon CSS

> ⚠ 此主题组件可作为模板使用，请在 Github 上分叉或将代码用于您的项目。您可以从 SCSS 中删除图标 SVG 代码，只保留您实际使用的代码……我已将 `mixin` 文件导入 `common.scss` 文件，因此您可以在该行下方或单独添加到桌面或移动部分。

该主题组件增加了在 CSS 中维护和轻松编辑 SVG 图标的功能。该组件包含此处找到的所有 SVG 图标：[discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/tree/main/vendor/assets/svg-icons/fontawesome)

* * *

> **[GitHub - VaperinaDEV/discourse-easy-svg-icon-css](https://github.com/VaperinaDEV/discourse-easy-svg-icon-css)**
>
> Contribute to VaperinaDEV/discourse-easy-svg-icon-css development by creating an account on GitHub.

* * *

### 如何使用？

固定参数：

`$icon-set`: brands, regular, solid  
`$icon-name`: 图标名称  
`$icon-color`: 图标颜色（`currentColor`、十六进制或颜色变量）  
`$width` 和 `$height`: 添加图标的大小

它看起来像这样：

```scss
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);

```

**使用 `currentColor`**  
这是一个在“ **Latest** ”导航栏项之前添加实心火箭图标的示例。

```scss
#navigation-bar {
  li.nav-item {
    &_latest {
      a {      
        gap: 0.5em;
        &:before {
          content: "";
          @include svg-icon(solid, rocket, currentColor, 1em, 1em);
        }
      }
    }
  }
}

```

![add-icon-to-latest](https://global.discourse-cdn.com/meta/original/4X/6/8/a/68a643ceb2ac685df9791af149af837d9fe414df.gif)

* * *

**使用 `var(--gold)` 颜色变量**  
这是一个在“ **Top** ”导航栏项之前添加金色实心星形图标的示例。

```scss
#navigation-bar {
  li.nav-item {
    &_top {
      a {      
        gap: 0.5em;
        &:before {
          content: "";
          @include svg-icon(regular, star, var(--gold), 1em, 1em);
        }
      }
    }
  }
}

```

![add-star-to-top](https://global.discourse-cdn.com/meta/original/4X/8/2/c/82c83792c4ae516464246812fdc61c0794760cf4.gif)

* * *

我们可以轻松地更改图标集、颜色，甚至在悬停时更改图标等……让我们看看！

现在，当鼠标悬停在按钮上时，我们将常规图标更改为实心图标。

```scss
#navigation-bar {
  li.nav-item {
    &_top {
      a {      
        gap: 0.5em;
        &:hover,
        &:focus,
        &.active {
          &:before {
            @include svg-icon(solid, star, currentColor, 1em, 1em);
          }
        }
        &:before {
          content: "";
          @include svg-icon(regular, star, currentColor, 1em, 1em);
        }
      }
    }
  }
}

```

![change-icon-set](https://global.discourse-cdn.com/meta/original/4X/2/8/8/288ab22ff6488d232e60a5e2af812be72ef3ee44.gif)

* * *

## Discourse Easy Emoji CSS

> ⚠ 此主题组件可作为模板使用，请在 Github 上分叉或将代码用于您的项目。我已将 `mixin` 文件导入 `common.scss` 文件，因此您可以在该行下方或单独添加到桌面或移动部分。

> **[GitHub - VaperinaDEV/discourse-easy-emoji-css](https://github.com/VaperinaDEV/discourse-easy-emoji-css)**
>
> Contribute to VaperinaDEV/discourse-easy-emoji-css development by creating an account on GitHub.

### 如何使用？

用法与 SVG 版本类似。

固定参数：

`$emoji-set`: apple, google, twitter, win10, google\_classic, facebook\_messenger  
`$emoji-name`: 表情符号名称  
`$width` 和 `$height`: 添加表情符号的大小

```scss
@include emoji($emoji-set, $emoji-name, $width, $height);

```

这是一个在“ **Latest** ”导航栏项之前添加 `facebook_messenger` `rocket` 表情符号，在“ **Top** ”导航栏项之前添加 `twitter` `star` 表情符号的示例。

```scss
#navigation-bar {
  li.nav-item {
    &_latest {
      a {      
        gap: 0.5em;
        &:before {
          content: "";
          @include emoji(facebook_messenger, rocket, 1em, 1em);
        }
      }
    }
    &_top {
      a {      
        gap: 0.5em;
        &:before {
          content: "";
          @include emoji(twitter, star, 1em, 1em);
        }
      }
    }
  }
}

```

![Screenshot 2024-03-25 at 5.26.26](https://global.discourse-cdn.com/meta/original/4X/9/e/9/9e9f0a12fb60537533c141e18e145f7d98eecb9c.png)

---

_[View the full topic](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656)._