Iconfont 图标
简介
AxUI图标库由笔者亲自绘制和编辑，图标库托管在iconfont.cn。整理了几百个页面常用图标，日后会不断修复和更新。每个图标都对应了一个样式和一个编码，在不同场景使用不同的调用方法。要注意的是css中的编码和html的编码头部稍有不同，比如一个图标在css中写作：\e601，在html中应该写作：
使用方法
前置条件是在页面引用ax-iconfont字体，如下所示：
<link href="https://at.alicdn.com/t/font_1551254_rxrrzgz2kjc.css" rel="stylesheet" type="text/css" />
第一种方法，使用css方式调用，比如class="ax-iconfont ax-icon-arrow-down-o"。最终结果是：
<span class="ax-iconfont ax-icon-arrow-down-o"></span>
第二种方法，使用伪类(before或者after)的content:''属性调用，比如span.ax-demo-icon:before{content:'\e601';font-family: "ax-iconfont";}。最终结果是：
<style>
span.ax-demo-icon:before{
content:'\e601';
font-family: "ax-iconfont";
}
</style>
第三种方法，直接将字体编码写在页面上，比如：。最终结果是：
<span class="ax-iconfont"></span>
命名规则
图标命名规则是：ax-icon- + 特点 + 形状 + 填充，形状一般是circle和square，简写为o和s；如果是纯色填充则加上fill。比如ax-icon-close-o-fill表示：带圆圈的关闭图标，同时纯色填充，显示结果为：。
系列图标举例：
- ax-icon-close
- ax-icon-close-o
- ax-icon-close-s
- ax-icon-close-o-fill
- ax-icon-close-s-fill
AX图标库
以下是最新的AX图标库的iconfont格式，包含438个图标，不定时更新。对应查看svg图标库。
-
ax-icon-arrow-down-o
\e601
-
ax-icon-arrow-left-o
\e602
-
-
ax-icon-arrow-right-o
\e604
-
ax-icon-arrow-down-o-fill
\e62c
-
ax-icon-arrow-left-o-fill
\e62d
-
ax-icon-arrow-right-o-fill
\e62e
-
ax-icon-arrow-up-o-fill
\e62f
-
ax-icon-triangle-down
\e605
-
ax-icon-triangle-up
\e606
-
ax-icon-triangle-right
\e607
-
ax-icon-triangle-left
\e608
-
ax-icon-triangle-down-fill
\e630
-
ax-icon-triangle-left-fill
\e631
-
ax-icon-triangle-up-fill
\e632
-
ax-icon-triangle-right-fill
\e633
-
ax-icon-arrow-left-t
\f15d
-
ax-icon-arrow-right-t
\f15e
-
-
ax-icon-arrow-down-t
\e769
-
-
ax-icon-arrow-right
\e60a
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
ax-icon-right-o-fill
\e619
-
ax-icon-down-o-fill
\e96a
-
ax-icon-left-o-fill
\e96b
-
-
-
-
-
-
-
-
ax-icon-corner-up-left
\e721
-
ax-icon-corner-left-down
\e722
-
ax-icon-corner-up-right
\e723
-
ax-icon-corner-right-up
\e724
-
ax-icon-corner-left-up
\e622
-
ax-icon-corner-left-up
\e623
-
ax-icon-corner-right-down
\e624
-
ax-icon-corner-down-right
\e625
-
ax-icon-down-double
\e612
-
ax-icon-left-double
\e613
-
ax-icon-right-double
\e614
-
-
-
-
-
-
-
-
-
-
-
ax-icon-check-o-fill
\e707
-
ax-icon-check-s-fill
\e704
-
ax-icon-check-s-gap
\e61b
-
ax-icon-check-o-gap
\e61a
-
-
-
-
-
-
-
-
-
ax-icon-close-o-fill
\e637
-
ax-icon-close-s-fill
\e638
-
-
ax-icon-backspace-fill
\e634
-
-
-
-
-
ax-icon-plus-o-fill
\e651
-
ax-icon-plus-s-fill
\e64e
-
-
-
-
-
ax-icon-minus-o-fill
\e649
-
ax-icon-minus-s-fill
\e64a
-
ax-icon-warning-o-t
\e7f0
-
-
ax-icon-warning-o-fill
\e63d
-
-
-
ax-icon-info-o-fill
\e64b
-
-
ax-icon-question-o-t
\e76f
-
-
ax-icon-question-o-fill
\e650
-
-
-
-
ax-icon-slash-h-fill
\e74f
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
ax-icon-eye-off-fill
\e68c
-
ax-icon-eye-off-alt
\e688
-
-
-
-
ax-icon-trash-alt-fill
\e690
-
-
-
-
ax-icon-unlock-fill
\e6a1
-
ax-icon-toggle-left
\e6a2
-
ax-icon-toggle-left-fill
\e6a4
-
ax-icon-toggle-right
\e6a3
-
ax-icon-toggle-right-fill
\e6a5
-
-
ax-icon-options-fill
\e66a
-
-
ax-icon-options-v-fill
\e66b
-
-
-
-
-
-
ax-icon-menu-unfold
\e96d
-
-
-
-
-
ax-icon-sort-az-down
\f0c6
-
-
ax-icon-sort-num-up
\f0cb
-
ax-icon-sort-num-down
\f0ca
-
ax-icon-sort-amount-up
\f0c8
-
ax-icon-sort-amount-down
\f0c7
-
-
ax-icon-widgets-fill
\e73f
-
-
-
-
-
-
-
-
-
-
ax-icon-paperplane-fill
\e7a2
-
-
ax-icon-filter-fill
\e6ed
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
ax-icon-phone-off-fill
\e6c7
-
ax-icon-phone-missed
\e6c1
-
ax-icon-phone-missed-fill
\e6c8
-
-
ax-icon-phone-call-fill
\e6c6
-
-
ax-icon-message-s-fill
\e6dd
-
-
ax-icon-message-o-fill
\e6de
-
-
ax-icon-facebook-fill
\e70c
-
-
ax-icon-twitter-fill
\e70d
-
-
-
-
ax-icon-wechat-fill
\e711
-
-
-
-
-
-
-
-
-
ax-icon-calendar-fill
\e745
-
-
ax-icon-printer-fill
\e72c
-
-
-
ax-icon-seal-ok-fill
\e71e
-
ax-icon-seal-refuse-fill
\e720
-
-
ax-icon-play-o-fill
\e701
-
-
-
ax-icon-pause-o-fill
\e700
-
-
-
-
-
-
ax-icon-mic-off-fill
\e6e1
-
-
ax-icon-headphones-fill
\e6d4
-
-
-
ax-icon-image-alt-fill
\e6cf
-
-
ax-icon-camera-fill
\e6ca
-
-
-
-
-
-
-
-
ax-icon-video-off-fill
\e69c
-
-
ax-icon-code-download
\e62a
-
-
ax-icon-code-o-fill
\e703
-
-
-
ax-icon-cloud-download
\e63e
-
ax-icon-cloud-upload
\e63f
-
ax-icon-cloud-download-fill
\e763
-
ax-icon-cloud-upload-fill
\e762
-
-
-
-
ax-icon-zoomout-fill
\e72a
-
ax-icon-zoomin-fill
\e729
-
-
ax-icon-file-remove
\e645
-
-
-
ax-icon-file-remove-fill
\e655
-
ax-icon-file-add-fill
\e654
-
-
ax-icon-file-text-fill
\e653
-
-
ax-icon-folder-open
\e778
-
ax-icon-folder-remove
\e652
-
-
ax-icon-folder-fill
\e659
-
ax-icon-folder-open-fill
\e777
-
ax-icon-folder-remove-fill
\e658
-
ax-icon-folder-add-fill
\e657
-
-
-
ax-icon-volume-mute
\e65f
-
ax-icon-volume-down
\e65c
-
-
-
ax-icon-volume-mute-fill
\e663
-
ax-icon-volume-down-fill
\e662
-
ax-icon-volume-up-fill
\e661
-
ax-icon-volume-off-fill
\e660
-
-
-
-
-
-
-
-
ax-icon-pie-alt-fill
\e6be
-
-
-
-
ax-icon-bell-off-fill
\e676
-
-
ax-icon-compass-fill
\e679
-
-
-
-
-
-
-
ax-icon-global-fill
\e681
-
-
-
-
-
-
-
-
-
ax-icon-settings-fill
\e6ac
-
ax-icon-settings-alt
\e6aa
-
ax-icon-settings-alt-fill
\e6ad
-
-
ax-icon-shield-fill
\e6b1
-
-
ax-icon-shield-off-fill
\e6b0
-
-
ax-icon-people-fill
\e6c0
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
ax-icon-flash-off-fill
\e6fc
-
ax-icon-trending-down
\e712
-
ax-icon-trending-up
\e714
-
-
ax-icon-telephone-fill
\e715
-
-
-
-
-
-
-
-
-
-
-
-
-
ax-icon-align-center
\e737
-
ax-icon-align-right
\e73c
-
ax-icon-align-justify
\e73d
-
-
-
-
-
-
-
ax-icon-umbrella-fill
\e752
-
-
-
-
-
-
-
-
-
ax-icon-quote-left-fill
\e75d
-
ax-icon-quote-right
\e7f5
-
ax-icon-quote-right-fill
\e970
-
-
ax-icon-fingerprint
\e75f
-
-
-
-
-
-
-
-
-
ax-icon-stackoverflow
\e781
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
离线使用
用户可下载字体文件本地部署使用。本页面列出不定时更新的AX图标库。
| 文件名 |
发布时间 |
图标数量 |
操作 |
| axfont-20210429.zip |
20210429 |
438 |
下载 |
