本文档介绍了 Semantic UI 中使用的图标系统。它涵盖了基于字体的图标实现、如何使用图标、可用的变体以及主题化选项。有关其他 UI 元素的信息，请参阅 元素。
Semantic UI 的图标系统采用基于字体的方案，其中图标被实现为字体字符而不是图像文件。该系统基于 Font Awesome 5，并具有自定义的命名约定和附加功能，以保持与 Semantic UI 设计原则的一致性。
来源
图标系统依赖于包含所有图标字形的自定义字体。当将图标类应用于元素时，CSS 使用带有特定 Unicode 字符的 content 属性，从字体中显示相应的图标。
核心图标实现定义在 icon.less 文件中。
来源
要使用 Semantic UI 中的图标，您需要将 icon 类与特定图标名称一起添加到 <i> 元素中。
该系统支持数百个图标，所有图标都定义在 icon.overrides 文件中，其中每个图标都映射到一个特定的 Unicode 字符。
来源
Semantic UI 中的图标支持各种状态来指示不同的条件或交互。
| 状态管理 | 类 | 描述 |
|---|---|---|
| 悬停 | hover | 鼠标悬停时图标高亮显示。 |
| 激活 | active | 图标突出显示，表示处于活动状态。 |
| Emphasized | emphasized | 图标突出显示（类似于 active）。 |
| 已禁用 | disabled | 图标显示为灰色，表示已禁用。 |
示例
来源
Semantic UI 提供了多种图标变体来定制其外观。
图标有各种尺寸选项。
| 大小 | 类 | 描述 |
|---|---|---|
| Mini | mini | 最小的图标尺寸。 |
| Tiny | tiny | 非常小的图标。 |
| 小型 | small | 小的图标。 |
| (Default) | - | 标准图标尺寸。 |
| 大型 | large | 大的图标。 |
| Big | big | 更大的图标。 |
| Huge | huge | 非常大的图标。 |
| Massive | massive | 最大的图标尺寸。 |
示例
来源
图标可以以各种方式进行样式设置。
| 变体 | 类 | 描述 |
|---|---|---|
| Fitted | fitted | 移除图标周围的额外边距。 |
| 链接 | link | 使图标看起来可点击（带悬停状态）。 |
| 圆形 | circular | 将图标放置在圆形容器中。 |
| Bordered | bordered | 将图标放置在带边框的正方形中。 |
| Flipped | flipped 或 horizontally flipped | 水平翻转图标。 |
| Vertically Flipped | vertically flipped | 垂直翻转图标。 |
| Rotated | rotated 或 clockwise rotated | 顺时针旋转图标 90 度。 |
| Counter-clockwise Rotated | counterclockwise rotated | 逆时针旋转图标 90 度。 |
| Inverted（反色） | inverted | 将图标颜色更改为白色（适用于深色背景）。 |
示例
来源
图标可以使用颜色类进行着色。
| 颜色 | 类 | 描述 |
|---|---|---|
| 红光 | red | 红色图标。 |
| Orange | orange | 橙色图标。 |
| Yellow | yellow | 黄色图标。 |
| Olive | olive | 橄榄绿色图标。 |
| 绿光 | green | 绿色图标。 |
| Teal | teal | 青色图标。 |
| 蓝光 | blue | 蓝色图标。 |
| Violet | violet | 紫罗兰色图标。 |
| Purple | purple | 紫色图标。 |
| Pink | pink | 粉色图标。 |
| Brown | brown | 棕色图标。 |
| Grey | grey | 灰色图标。 |
| Black | black | 黑色图标。 |
示例
来源
Semantic UI 为图标提供加载动画。
加载状态会为图标添加连续的旋转动画。
来源
图标可以组合在一起创建更复杂的图标。
示例
这会创建一个带有角落里一个小加号图标的文件图标。
来源
Semantic UI 提供了数百个图标，均在 icon.overrides 文件中列出。图标分类为：
Semantic UI 使用特定于图标的命名约定，这与 Font Awesome 略有不同。
i.icon.circle 而不是 i.icon.circle-o）。ellipsis horizontal 而不是 ellipsis-h）。来源
Semantic UI 中的图标系统可以通过主题化系统完全定制。
可以定制的主要变量包括：
| 可变 | 目的 | 默认 |
|---|---|---|
@fontName | 图标字体的名称。 | 'icons' |
@src | 字体源路径。 | 字体文件的 URL 路径。 |
@opacity | 默认图标不透明度。 | 1 |
@width | 图标宽度。 | 1.18em |
@height | 图标高度。 | 1em |
@distanceFromText | 与文本的距离（边距）。 | 0.25rem |
| 尺寸变量 | 不同变体的尺寸。 | 值为 0.4em 到 8em。 |
来源
图标系统设计用于与其他 Semantic UI 组件无缝协作。
<button class="ui button"><i class="save icon"></i> Save</button>在底层，图标系统使用：
:before）来插入图标内容。该系统定义在三个关键文件中：
icon.less - 图标的核心样式。icon.variables - 可定制的变量。icon.overrides - 图标定义和覆盖。来源