Iconfont 字体图标
有含义的矢量图形,每一个图标打倒一个敌人。
图标的命名规范
我们为每个图标赋予了语义化的命名。我们的命名规范如:
使用
-
来连接单词;实心和描线图标保持同名,用
-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
- 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