# 有没有插件能给类别加上图标？
**URL:** https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368
**Category:** Support
**Created:** [2023 年8 月 23 日 22:07 UTC](https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368 "2023-08-23T22:07:53Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Glow](https://meta.discourse.org/u/Glow)
#### Post date: [2023 年8 月 23 日 22:07 UTC](https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368/1 "2023-08-23T22:07:54Z")
您好，我想知道是否有某种插件可以像这样在类别旁边添加图标？我知道有一个，但我记不起名字了。
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023 年8 月 23 日 22:21 UTC](https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368/2 "2023-08-23T22:21:56Z")
您好 @Glow 👋
不需要插件或主题组件。通过右上角的管理员扳手进入您想要设置图片图标的每个分类的“分类设置”，然后进入“图片”选项卡，在那里您可以上传图片以显示在您的截图中。您想要的是第一个，“分类图片 Logo”。请注意，它也会显示在分类页面的顶部。
---
### Author:  [@Glow](https://meta.discourse.org/u/Glow)
#### Post date: [2023 年8 月 23 日 22:23 UTC](https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368/3 "2023-08-23T22:23:53Z")
谢谢！有没有办法让它变小一点？它太大了
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023 年8 月 23 日 22:27 UTC](https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368/4 "2023-08-23T22:27:37Z")
在主题或主题组件的通用 CSS 中，您可以这样做：
```scss
.category-logo.aspect-image {
width: 100px;
}
```
只需将宽度值更改为您想要的任何值。也可以使用百分比而不是像素。希望这对您有帮助 🙂
---
### Author:  [@Glow](https://meta.discourse.org/u/Glow)
#### Post date: [2023 年8 月 23 日 22:47 UTC](https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368/5 "2023-08-23T22:47:25Z")
> [@Lilly](#):
>
> ```plaintext
> .category-logo.aspect-image {
> width: 100px;
> }
>
> ```
嗯，我确定还有一个插件，因为我记得我用过这样的东西，因为它缩小的时候看起来很奇怪，而且不像图片里那样，但我记不起名字了。
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023 年8 月 24 日 02:04 UTC](https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368/6 "2023-08-24T02:04:37Z")
您可以使用 CSS 进一步自定义图片及其放置位置。
还有一个这个，但不确定是否是您想要的。
> [@Category Icons](https://meta.discourse.org/t/category-icons/104683/):
>
> warning This theme component is deprecated and should no longer be used. Its features are now in Discourse Core (see: [Bringing popular features to Discourse](https://meta.discourse.org/t/bringing-popular-features-to-discourse-header-search-welcome-banner-and-category-icons-emoji/359169)). For private category icon customization, refer to [this topic](https://meta.discourse.org/t/new-aliases-for-replacing-lock-icons-on-closed-topics-and-restricted-categories/373778). discourse2Summary Category Icons allows category badge links to have icons next to the category name.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/category-icons)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-category-icons](https://github.com/discourse/discourse-category-icons) …
---
### Author:  [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [2023 年8 月 27 日 02:59 UTC](https://meta.discourse.org/t/is-there-a-plugin-of-some-sort-to-have-an-icon-next-to-a-category/276368/7 "2023-08-27T02:59:58Z")
这是我以前写的一段代码……
```plaintext
:root {
--category-logo-width: 70px;
--category-spacing: 0px;
}
.desktop-view table.category-list .category-logo.aspect-image {
width: var(--category-logo-width);
height: calc(var(--category-logo-width) - 45px);
margin: 0 5px 0 0;
padding: 0;
transform: translatey(-35px);
}
table.category-list .category-logo.aspect-image img{
width: var(--category-logo-width);
height: var(--category-logo-width);
}
.desktop-view .has-logo .category-text-title {
margin-left: calc(var(--category-logo-width) + 5px);
}
.mobile-view .category-title-link {
display: flex;
}
.mobile-view .category-logo.aspect-image {
margin: 0 5px 0 0;
margin-top: 0 !important;
padding: 0;
order: -1
}
.mobile-view .category-text-title {
margin: auto 0;
}
.desktop-view td.category {
margin: var(--category-spacing);
}
.desktop-view table.category-list {
border-collapse: separate;
border-spacing: 0 var(--category-spacing);
}
.desktop-view table.category-list tr {
margin: var(--category-spacing);
}
```