徽章、按钮与图标 ¶

ref-type（仅限 button-ref）: 使用的引用类型；可选值为 any（默认）、ref、doc 或 myst
color: 设置按钮的颜色（背景和字体）。可选用以下语义化颜色名称之一：primary、secondary、success、danger、warning、info、light、dark、muted。
outline: 轮廓颜色变体
align: 设置按钮在页面上的对齐方式；可选值为 left（左对齐）、right（右对齐）、center（居中对齐）或 justify（两端对齐）。
expand: 扩展以适应父容器宽度
click-parent: 使父容器也可点击
tooltip: 悬停时添加工具提示
shadow: 添加阴影 CSS
class: 额外的 CSS 类

内联图标¶

内联图标角色适用于 GitHub octicon、Google Material Design Icons 或 FontAwesome 库。

Octicon 图标和 Material 图标通过 octicon 和 material-<flavor> 角色以 SVG 格式直接嵌入页面。以下是 Material Design 图标的不同风格。

默认情况下，图标的高度为 1em （即字体的高度）。可以在分号 (;) 后设置特定高度，单位可以是 px、em 或 rem。还可以在第二个分号 (;) 分隔符后为 SVG 添加额外的 CSS 类。

Octicon 图标¶

带颜色的图标：，以及一些更多文本。

MARKDOWN

A coloured icon: {octicon}`report;1em;sd-text-info`, some more text.

RST

A coloured icon: :octicon:`report;1em;sd-text-info`, some more text.

全部 Octicon

`accessibility`
`accessibility-inset`
`alert`
`alert-fill`
`apps`
`archive`
`arrow-both`
`arrow-down`
`arrow-down-left`
`arrow-down-right`
`arrow-left`
`arrow-right`
`arrow-switch`
`arrow-up`
`arrow-up-left`
`arrow-up-right`
`beaker`
`bell`
`bell-fill`
`bell-slash`
`blocked`
`bold`
`book`
`bookmark`
`bookmark-fill`
`bookmark-slash`
`bookmark-slash-fill`
`briefcase`
`broadcast`
`browser`
`bug`
`cache`
`calendar`
`check`
`check-circle`
`check-circle-fill`
`checkbox`
`checklist`
`chevron-down`
`chevron-left`
`chevron-right`
`chevron-up`
`circle`
`circle-slash`
`clock`
`clock-fill`
`cloud`
`cloud-offline`
`code`
`code-of-conduct`
`code-review`
`code-square`
`codescan`
`codescan-checkmark`
`codespaces`
`columns`
`command-palette`
`comment`
`comment-discussion`
`commit`
`container`
`copilot`
`copilot-error`
`copilot-warning`
`copy`
`cpu`
`credit-card`
`cross-reference`
`dash`
`database`
`dependabot`
`desktop-download`
`device-camera`
`device-camera-video`
`device-desktop`
`device-mobile`
`devices`
`diamond`
`diff`
`diff-added`
`diff-ignored`
`diff-modified`
`diff-removed`
`diff-renamed`
`discussion-closed`
`discussion-duplicate`
`discussion-outdated`
`dot`
`dot-fill`
`download`
`duplicate`
`ellipsis`
`eye`
`eye-closed`
`feed-discussion`
`feed-forked`
`feed-heart`
`feed-issue-closed`
`feed-issue-draft`
`feed-issue-open`
`feed-issue-reopen`
`feed-merged`
`feed-person`
`feed-plus`
`feed-public`
`feed-pull-request-closed`
`feed-pull-request-draft`
`feed-pull-request-open`
`feed-repo`
`feed-rocket`
`feed-star`
`feed-tag`
`feed-trophy`
`file`
`file-added`
`file-badge`
`file-binary`
`file-code`
`file-diff`
`file-directory`
`file-directory-fill`
`file-directory-open-fill`
`file-directory-symlink`
`file-media`
`file-moved`
`file-removed`
`file-submodule`
`file-symlink-file`
`file-zip`
`filter`
`filter-remove`
`fiscal-host`
`flame`
`fold`
`fold-down`
`fold-up`
`gear`
`gift`
`git-branch`
`git-commit`
`git-compare`
`git-merge`
`git-merge-queue`
`git-pull-request`
`git-pull-request-closed`
`git-pull-request-draft`
`globe`
`goal`
`grabber`
`graph`
`hash`
`heading`
`heart`
`heart-fill`
`history`
`home`
`home-fill`
`horizontal-rule`
`hourglass`
`hubot`
`id-badge`
`image`
`inbox`
`infinity`
`info`
`issue-closed`
`issue-draft`
`issue-opened`
`issue-reopened`
`issue-tracked-by`
`issue-tracks`
`italic`
`iterations`
`kebab-horizontal`
`key`
`key-asterisk`
`law`
`light-bulb`
`link`
`link-external`
`list-ordered`
`list-unordered`
`location`
`lock`
`log`
`logo-gist`
`logo-github`
`mail`
`mark-github`
`markdown`
`megaphone`
`mention`
`meter`
`milestone`
`mirror`
`moon`
`mortar-board`
`move-to-bottom`
`move-to-end`
`move-to-start`
`move-to-top`
`multi-select`
`mute`
`no-entry`
`no-entry-fill`
`north-star`
`note`
`number`
`organization`
`package`
`package-dependencies`
`package-dependents`
`paintbrush`
`paper-airplane`
`paperclip`
`passkey-fill`
`paste`
`pencil`
`people`
`person`
`person-add`
`person-fill`
`pin`
`pin-slash`
`pivot-column`
`play`
`plug`
`plus`
`plus-circle`
`project`
`project-roadmap`
`project-symlink`
`project-template`
`pulse`
`question`
`quote`
`read`
`redo`
`rel-file-path`
`reply`
`repo`
`repo-clone`
`repo-deleted`
`repo-forked`
`repo-locked`
`repo-pull`
`repo-push`
`repo-template`
`report`
`rocket`
`rows`
`rss`
`ruby`
`screen-full`
`screen-normal`
`search`
`server`
`share`
`share-android`
`shield`
`shield-check`
`shield-lock`
`shield-slash`
`shield-x`
`sidebar-collapse`
`sidebar-expand`
`sign-in`
`sign-out`
`single-select`
`skip`
`skip-fill`
`sliders`
`smiley`
`sort-asc`
`sort-desc`
`sparkle-fill`
`sponsor-tiers`
`square`
`square-fill`
`squirrel`
`stack`
`star`
`star-fill`
`stop`
`stopwatch`
`strikethrough`
`sun`
`sync`
`tab`
`tab-external`
`table`
`tag`
`tasklist`
`telescope`
`telescope-fill`
`terminal`
`three-bars`
`thumbsdown`
`thumbsup`
`tools`
`tracked-by-closed-completed`
`tracked-by-closed-not-planned`
`trash`
`triangle-down`
`triangle-left`
`triangle-right`
`triangle-up`
`trophy`
`typography`
`undo`
`unfold`
`unlink`
`unlock`
`unmute`
`unread`
`unverified`
`upload`
`verified`
`versions`
`video`
`webhook`
`workflow`
`x`
`x-circle`
`x-circle-fill`
`zap`
`zoom-in`
`zoom-out`

Material Design 图标¶

Material Design 图标提供了多种风格。每种风格代表 sphinx-design 中使用的不同角色。这些风格包括：

material-regular
material-outlined
material-round
material-sharp
material-twotone

并非所有图标都适用于每种风格，但大多数都可以。这里不展示全部 10660 多个图标，建议您浏览由 Google 托管的 Material Design Icons 展示页面来查看可用图标。

常规图标：，以及一些更多文本。
带颜色的常规图标：，以及一些更多文本。
带颜色的轮廓图标：，以及一些更多文本。
带颜色的锐利图标：，以及一些更多文本。
带颜色的圆润图标：，以及一些更多文本。
带颜色的双色调图标：，以及一些更多文本。

MARKDOWN

- A regular icon: {material-regular}`data_exploration;2em`, some more text
- A coloured regular icon: {material-regular}`settings;3em;sd-text-success`, some more text.
- A coloured outline icon: {material-outlined}`settings;3em;sd-text-success`, some more text.
- A coloured sharp icon: {material-sharp}`settings;3em;sd-text-success`, some more text.
- A coloured round icon: {material-round}`settings;3em;sd-text-success`, some more text.
- A coloured two-tone icon: {material-twotone}`settings;3em;sd-text-success`, some more text.
- A fixed size icon: {material-regular}`data_exploration;24px`, some more text.

RST

- A regular icon: :material-regular:`data_exploration;2em`, some more text
- A coloured regular icon: :material-regular:`settings;3em;sd-text-success`, some more text.
- A coloured outline icon: :material-outlined:`settings;3em;sd-text-success`, some more text.
- A coloured sharp icon: :material-sharp:`settings;3em;sd-text-success`, some more text.
- A coloured round icon: :material-round:`settings;3em;sd-text-success`, some more text.
- A coloured two-tone icon: :material-twotone:`settings;3em;sd-text-success`, some more text.
- A fixed size icon: :material-regular:`data_exploration;24px`, some more text.

FontAwesome 图标¶

FontAwesome 图标通过 FontAwesome 的 CSS 类添加。如果您使用的主题尚未包含 FontAwesome 的 CSS，可以通过 html_css_files 配置选项从 font-awesome CDN 加载，例如：

html_css_files = [
    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
]

角色名称可以使用 fa （在 font-awesome v5 中已弃用）、fas、fab 或 far。请注意，并非所有常规样式的图标都是免费的，far 角色仅适用于免费图标。

警告

由于 FontAwesome 图标是直接从其分发的 CSS 中获取的，因此不支持为 fa* 角色指定高度/大小。不过，您可以随时添加自定义的 CSS 类来控制 font-size 属性。

如果为 fa* 角色提供了高度/大小，它将被解释为 CSS 类。fa* 角色的参数中最多只能包含 1 个 ;。

MARKDOWN

- An icon {fas}`spinner;sd-text-primary`, some more text.
- An icon {fab}`github`, some more text.
- An icon {fab}`gitkraken;sd-text-success fa-xl`, some more text.
- An icon {fas}`skull;sd-text-danger`, some more text.

RST

- An icon :fas:`spinner;sd-text-primary`, some more text.
- An icon :fab:`github`, some more text.
- An icon :fab:`gitkraken;sd-text-success fa-xl`, some more text.
- An icon :fas:`skull;sd-text-danger`, some more text.

图标，以及一些更多文本。
图标，以及一些更多文本。
An icon , some more text.
An icon , some more text.

默认情况下，图标仅在 HTML 格式中输出。但如果您希望在 LaTeX 中输出 FontAwesome 图标，可以使用 fontawesome 包，并在配置中添加：

sd_fontawesome_latex = True

徽章、按钮与图标 ¶

徽章¶

按钮¶

button-link 和 button-ref 选项¶

内联图标¶

Octicon 图标¶

Material Design 图标¶

FontAwesome 图标¶

`button-link` 和 `button-ref` 选项¶