ant-design/components/iconfont/index.md
2015-07-10 17:17:58 +08:00

15 KiB
Raw Blame History

Iconfont

  • category: CSS
  • chinese: 字体图标
  • order: 1
  • nodemos: true

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

图标的命名规范

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

  • 使用 - 来连接单词;

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

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

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

如何使用

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

<i class="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
  • large
  • 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