Tree: 806dfbfd1e

15 KiB

Raw Blame History

Iconfont

category: Components
chinese: 字体图标
type: 基本
noinstant: true

有含义的矢量图形，每一个图标打倒一个敌人。

图标的命名规范

我们为每个图标赋予了语义化的命名。只需在标签内，制定对应的 type 属性即可。

不同 type 命名规则如下:

实心和描线图标保持同名，用 -o 来区分，比如 question-circle(实心) 和 question-circle-o(描线)；
命名顺序：[icon名]-[描线与否]-[方向]。

实现原理

所有的 Icon 标签最终会渲染为

<i class="anticon anticon-${type}"></i>

如何使用

使用标签申明组件，设置对应的 type 设置需要渲染的图标，示例代码如下:

<Icon type="link"></Icon>

点击图标复制代码。

图标列表

一. 方向性图标

step-backward
step-forward
fast-backward
fast-forward
shrink
arrow-salt
down
up
left
right
caret-down
caret-up
caret-left
caret-right
caret-circle-right
caret-circle-left
caret-circle-o-right
caret-circle-o-left
circle-right
circle-left
circle-o-right
circle-o-left
double-right
double-left
verticle-right
verticle-left
forward
backward
rollback
retweet

二. 提示建议性图标

question
question-circle-o
question-circle
plus
plus-circle-o
plus-circle
pause
pause-circle-o
pause-circle
minus
minus-circle-o
minus-circle
info
info-circle-o
info-circle
exclamation
exclamation-circle-o
exclamation-circle
cross
cross-circle-o
cross-circle
check
check-circle-o
check-circle
clock-circle-o
clock-circle

三. 网站通用图标