# 为 Card 组件内的图标设置样式 (/zh/help-center/style-card-icons-with-custom-css)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 223 · updated: 2026-09-23 -->

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

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

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

```css title="styling.css"
[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 的加载方式和可用选择器的完整列表，请参阅[自定义脚本](/zh/customize/custom-scripts)。

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

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