> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 为 Card 组件内的图标设置样式

> 使用自定义 CSS 和 card-icon 数据属性选择器，为 Card 组件的图标添加背景色、圆角或内边距。

[Card 组件](/docs/zh/components/cards)没有用于设置图标样式的 props，例如添加背景色、圆角或内边距。要在继续使用 Card 组件的同时自定义卡片图标，请使用自定义 CSS 定位图标。

<div id="target-the-card-icon">
  ## 定位卡片图标
</div>

卡片图标在渲染时带有 `data-component-part="card-icon"` 属性。通用的 `icon` 元素选择器无法匹配卡片内的图标，因此像 `card icon { }` 这样的规则不会生效。请改用数据属性选择器：

```css styling.css theme={null}
[data-component-part="card-icon"] {
  background-color: var(--gray-100);
  border-radius: 0.5rem;
  padding: 0.5rem;
}
```

如果该选择器与其他样式冲突，可以使用 `.card [data-component-part="card-icon"]` 将规则限定在卡片范围内。

将规则保存在内容目录中的任意 `.css` 文件里。内容目录是仓库中包含 `docs.json` 文件的文件夹。Mintlify 会自动在每个页面加载该文件。关于自定义 CSS 的加载方式和可用选择器的完整列表，请参阅[自定义脚本](/docs/zh/customize/custom-scripts)。

<div id="other-card-parts">
  ## 其他卡片部分
</div>

卡片还公开了其他 `data-component-part` 属性，你可以用同样的方式设置样式，包括 `card-title`、`card-content`、`card-image` 和 `card-cta`。完整列表请参阅[自定义脚本](/docs/zh/customize/custom-scripts#element-selectors)。


## Related topics

- [图标](/docs/zh/components/icons.md)
- [标注框](/docs/zh/components/callouts.md)
- [卡片](/docs/zh/components/cards.md)