ant-design/components/iconfont/index.md

Iconfont

• category: Components
• chinese: 字体图标
• type: 基本

---

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

图标的命名规范

我们为每个图标赋予了语义化的命名。我们的命名规范如：

• 使用 - 来连接单词；

• 实心和描线图标保持同名，用 -o 来区分，比如 question-circle(实心) 和 question-circle-o(描线)；

• 命名顺序：[icon名]-[描线与否]-[方向]。

每个图标的类名需要在图标名称前加上 anticon- 前缀，如 .anticon-question-circle。

如何使用

使用时所有的图标都需要一个基类 .anticon 和对应每个图标的类。在这里，我们使用 <i> 标签，如下面代码演示使用即可。

<i className="anticon anticon-link"></i>

点击图标复制代码。

图标列表

一. 方向性图标

• 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
• mail
• 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