9.6. 徽章，按钮和图标#
9.6.1. 徽章#
Inline badges can be used as a labelling component. Badges are available in each semantic color, with filled and outline variants:
内联标识可以用作标签组件。
徽章有各种语义颜色，填充和轮廓的变体:
plain badge
primary, primary-line
secondary, secondary-line
success, success-line
info, info-line
warning, warning-line
danger, danger-line
light, light-line
dark, dark-line
Syntax
bdg-link- and bdg-ref- variants are also available for use with links and references.
The syntax is the same as for the ref role.
’ bdg-link- ‘和’ bdg-ref- '变体也可用于链接和参考。
语法与“ref”角色相同。
badges
Syntax
9.6.3. 图标#
Inline icon roles are available for both the GitHub octicon or FontAwesome libraries.
Octicon icons are added as SVG’s directly into the page with the octicon role.
By default the icon will be of height 1em (i.e. the height of the font).
A specific height can be set after a semi-colon (;) with units of either px, em or rem.
Additional CSS classes can also be added to the SVG after a second semi-colon (;) delimiter.
A coloured icon: , some more text.
All Octicons
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 |
FontAwesome icons are added via the Fontawesome CSS classes. If the theme you are using does not already include the FontAwesome CSS, it should be loaded in your configuration from a font-awesome CDN, with the html_css_files option, e.g.:
html_css_files = ["https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"]
Use either fa (deprecated in font-awesome v5), fas, fab or far for the role name.
Note that not all regular style icons are free, far role only works with free ones.
An icon {fas}`spinner;sd-bg-primary sd-bg-text-primary`, some more text.
An icon :fas:`spinner;sd-bg-primary sd-bg-text-primary`, some more text.
An icon , some more text.
By default, icons will only be output in HTML formats. But if you want fontawesome icons to be output on LaTeX, using the fontawesome package, you can add to your configuration:
sd_fontawesome_latex = True