mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-26 20:20:00 +08:00
15 KiB
15 KiB
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" />
点击图标复制代码。
图标列表
一. 方向性图标
- 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
三. 网站通用图标
- lock
- unlock
- android
- apple
- area-chart
- bar-chart
- bars
- book
- calendar
- cloud
- cloud-download
- code
- copy
- credit-card
- delete
- desktop
- download-line
- edit
- ellipsis
- environment
- file
- file-text
- folder
- folder-open
- github
- hdd
- frown
- meh
- inbox
- laptop
- appstore
- line-chart
- link
- logout
- menu-fold
- menu-unfold
- mobile
- notification
- paper-clip
- picture
- pie-chart
- poweroff
- reload
- search
- setting
- share-alt
- shopping-cart
- smile
- tablet
- tag
- tags
- to-top
- upload
- user
- video-camera
- windows
- ie
- chrome
- home
- loading