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>
                        

第三种方法,直接将字体编码写在页面上,比如:&#xe601;。最终结果是:

                        <span class="ax-iconfont">&#xe601;</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-up-o
    \e603
  • 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-up-t
    \e768
  • ax-icon-arrow-down-t
    \e769
  • ax-icon-arrow-left
    \e609
  • ax-icon-arrow-right
    \e60a
  • ax-icon-arrow-down
    \e60b
  • ax-icon-arrow-up
    \e60c
  • ax-icon-down-t
    \e772
  • ax-icon-up-t
    \e771
  • ax-icon-left-t
    \f161
  • ax-icon-right-t
    \e76b
  • ax-icon-down
    \e60d
  • ax-icon-left
    \e60e
  • ax-icon-up
    \e610
  • ax-icon-left
    \e8f6
  • ax-icon-left-o
    \e8f6
  • ax-icon-up-o
    \e967
  • ax-icon-down-o
    \e968
  • ax-icon-right-o
    \e969
  • ax-icon-right-o-fill
    \e619
  • ax-icon-down-o-fill
    \e96a
  • ax-icon-left-o-fill
    \e96b
  • ax-icon-up-o-fill
    \e96c
  • ax-icon-left-up
    \e61d
  • ax-icon-left-down
    \e61e
  • ax-icon-right-up
    \e61f
  • ax-icon-right-down
    \e620
  • ax-icon-expand
    \e621
  • ax-icon-collapse
    \e639
  • 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-up-double
    \e615
  • ax-icon-dot-left
    \e733
  • ax-icon-dot-right
    \e734
  • ax-icon-pull-down
    \e79f
  • ax-icon-pull-up
    \e96e

表单类

  • ax-icon-check-t
    \e773
  • ax-icon-check
    \e616
  • ax-icon-check-o-t
    \e76d
  • ax-icon-check-o
    \e706
  • ax-icon-check-s
    \e617
  • 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-radio
    \e6b2
  • ax-icon-radio-fill
    \e6b3
  • ax-icon-circle
    \e61c
  • ax-icon-close-t
    \f162
  • ax-icon-close
    \e63a
  • ax-icon-close-o-t
    \e76c
  • ax-icon-close-o
    \e618
  • ax-icon-close-s
    \e708
  • ax-icon-close-o-fill
    \e637
  • ax-icon-close-s-fill
    \e638
  • ax-icon-backspace
    \e626
  • ax-icon-backspace-fill
    \e634
  • ax-icon-plus-t
    \e767
  • ax-icon-plus
    \e627
  • ax-icon-plus-s
    \e628
  • ax-icon-plus-o
    \e629
  • ax-icon-plus-o-fill
    \e651
  • ax-icon-plus-s-fill
    \e64e
  • ax-icon-minus-t
    \e766
  • ax-icon-minus
    \e64c
  • ax-icon-minus-s
    \e62b
  • ax-icon-minus-o
    \e635
  • ax-icon-minus-o-fill
    \e649
  • ax-icon-minus-s-fill
    \e64a
  • ax-icon-warning-o-t
    \e7f0
  • ax-icon-warning-o
    \e709
  • ax-icon-warning-o-fill
    \e63d
  • ax-icon-info-o-t
    \e76e
  • ax-icon-info-o
    \e636
  • ax-icon-info-o-fill
    \e64b
  • ax-icon-question
    \e63c
  • ax-icon-question-o-t
    \e76f
  • ax-icon-question-o
    \e63b
  • ax-icon-question-o-fill
    \e650
  • ax-icon-slash
    \e74b
  • ax-icon-slash-fill
    \e750
  • ax-icon-slash-h
    \e96f
  • ax-icon-slash-h-fill
    \e74f
  • ax-icon-sync
    \e753
  • ax-icon-refresh
    \e754
  • ax-icon-loader
    \e755
  • ax-icon-select
    \e760
  • ax-icon-addpic
    \e764
  • ax-icon-earth
    \e67f
  • ax-icon-earth-fill
    \e680
  • ax-icon-edit
    \e683
  • ax-icon-edit-fill
    \e685
  • ax-icon-edit
    \e682
  • ax-icon-edit-fill
    \e684
  • ax-icon-heart
    \e686
  • ax-icon-heart-fill
    \e687
  • ax-icon-eye
    \e68a
  • ax-icon-eye-fill
    \e68b
  • ax-icon-eye-off
    \e689
  • ax-icon-eye-off-fill
    \e68c
  • ax-icon-eye-off-alt
    \e688
  • ax-icon-trash
    \e68d
  • ax-icon-trash-fill
    \e68f
  • ax-icon-trash-alt
    \e68e
  • ax-icon-trash-alt-fill
    \e690
  • ax-icon-lock
    \e69e
  • ax-icon-lock-fill
    \e6a0
  • ax-icon-unlock
    \e69f
  • 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
    \e668
  • ax-icon-options-fill
    \e66a
  • ax-icon-options-v
    \e669
  • ax-icon-options-v-fill
    \e66b
  • ax-icon-list
    \e66f
  • ax-icon-menu
    \e671
  • ax-icon-more
    \e6701
  • ax-icon-more-v
    \e672
  • ax-icon-menu-fold
    \e673
  • ax-icon-menu-unfold
    \e96d
  • ax-icon-street
    \f0e1
  • ax-icon-swap
    \e761
  • ax-icon-sort
    \f0c5
  • ax-icon-list-ol
    \f03c
  • ax-icon-sort-az-down
    \f0c6
  • ax-icon-sort-az-up
    \f048
  • 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
    \e740
  • ax-icon-widgets-fill
    \e73f
  • ax-icon-grid
    \e73a
  • ax-icon-grid-fill
    \e73b
  • ax-icon-totop
    \e72e
  • ax-icon-tobottom
    \e72d
  • ax-icon-home
    \e72f
  • ax-icon-home-fill
    \e730
  • ax-icon-me
    \e732
  • ax-icon-me-fill
    \e731
  • ax-icon-paperplane
    \e6e9
  • ax-icon-paperplane-fill
    \e7a2
  • ax-icon-filter
    \e6eb
  • ax-icon-filter-fill
    \e6ed
  • ax-icon-nav
    \e6e4
  • ax-icon-nav-fill
    \e6e5
  • ax-icon-nav-v
    \e6e3
  • ax-icon-nav-v-fill
    \e6e6
  • ax-icon-map
    \e6d5
  • ax-icon-map-fill
    \e6d7
  • ax-icon-pin
    \e6d6
  • ax-icon-pin-fill
    \e6d8
  • ax-icon-undo
    \e694
  • ax-icon-undo-fill
    \e695
  • ax-icon-redo
    \e749
  • ax-icon-redo-fill
    \e74a
  • ax-icon-badge-new
    \e74c
  • ax-icon-badge-vip
    \e74d
  • ax-icon-badge-hot
    \e74e

社交分享类

  • ax-icon-phone
    \e6c2
  • ax-icon-phone-fill
    \e6c5
  • ax-icon-phone-off
    \e6c3
  • ax-icon-phone-off-fill
    \e6c7
  • ax-icon-phone-missed
    \e6c1
  • ax-icon-phone-missed-fill
    \e6c8
  • ax-icon-phone-call
    \e6c4
  • ax-icon-phone-call-fill
    \e6c6
  • ax-icon-message-s
    \e6db
  • ax-icon-message-s-fill
    \e6dd
  • ax-icon-message-o
    \e6dc
  • ax-icon-message-o-fill
    \e6de
  • ax-icon-twitter
    \e70a
  • ax-icon-facebook-fill
    \e70c
  • ax-icon-twitter
    \e70b
  • ax-icon-twitter-fill
    \e70d
  • ax-icon-weibo
    \e717
  • ax-icon-weibo-fill
    \e70f
  • ax-icon-wechat
    \e718
  • ax-icon-wechat-fill
    \e711
  • ax-icon-qq
    \e716
  • ax-icon-qq-fill
    \e70e
  • ax-icon-share
    \e691
  • ax-icon-share-fill
    \e692
  • ax-icon-link-open
    \e693

媒体文件类

  • ax-icon-apply
    \e743
  • ax-icon-apply-fill
    \e744
  • ax-icon-calendar
    \e746
  • ax-icon-calendar-fill
    \e745
  • ax-icon-printer
    \e72b
  • ax-icon-printer-fill
    \e72c
  • ax-icon-seal
    \e71f
  • ax-icon-seal-fill
    \e71d
  • ax-icon-seal-ok-fill
    \e71e
  • ax-icon-seal-refuse-fill
    \e720
  • ax-icon-play-o
    \e6ff
  • ax-icon-play-o-fill
    \e701
  • ax-icon-pause
    \e765
  • ax-icon-pause-o
    \e6fe
  • ax-icon-pause-o-fill
    \e700
  • ax-icon-film
    \e6ea
  • ax-icon-film-fill
    \e6ec
  • ax-icon-mic
    \e6e0
  • ax-icon-mic-fill
    \e6e2
  • ax-icon-mic-off
    \e6df
  • ax-icon-mic-off-fill
    \e6e1
  • ax-icon-headphones
    \e6d3
  • ax-icon-headphones-fill
    \e6d4
  • ax-icon-image
    \e6cd
  • ax-icon-image-fill
    \e6ce
  • ax-icon-image-alt-fill
    \e6cf
  • ax-icon-camera
    \e6c9
  • ax-icon-camera-fill
    \e6ca
  • ax-icon-music
    \e697
  • ax-icon-music-fill
    \e69b
  • ax-icon-email
    \e696
  • ax-icon-email-fill
    \e69a
  • ax-icon-video
    \e699
  • ax-icon-video-fill
    \e69d
  • ax-icon-video-off
    \e698
  • ax-icon-video-off-fill
    \e69c
  • ax-icon-code
    \e611
  • ax-icon-code-download
    \e62a
  • ax-icon-code-o
    \e702
  • ax-icon-code-o-fill
    \e703
  • ax-icon-download
    \e640
  • ax-icon-upload
    \e641
  • ax-icon-cloud-download
    \e63e
  • ax-icon-cloud-upload
    \e63f
  • ax-icon-cloud-download-fill
    \e763
  • ax-icon-cloud-upload-fill
    \e762
  • ax-icon-search
    \e644
  • ax-icon-zoomout
    \e643
  • ax-icon-zoomin
    \e642
  • ax-icon-zoomout-fill
    \e72a
  • ax-icon-zoomin-fill
    \e729
  • ax-icon-file
    \e647
  • ax-icon-file-remove
    \e645
  • ax-icon-file-add
    \e646
  • ax-icon-file-fill
    \e656
  • ax-icon-file-remove-fill
    \e655
  • ax-icon-file-add-fill
    \e654
  • ax-icon-file-text
    \e648
  • ax-icon-file-text-fill
    \e653
  • ax-icon-folder
    \e64f
  • ax-icon-folder-open
    \e778
  • ax-icon-folder-remove
    \e652
  • ax-icon-folder-add
    \e64d
  • 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-copy
    \e65a
  • ax-icon-copy-fill
    \e65b
  • ax-icon-volume-mute
    \e65f
  • ax-icon-volume-down
    \e65c
  • ax-icon-volume-up
    \e65d
  • ax-icon-volume-off
    \e65e
  • 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-attach
    \e664
  • ax-icon-attach-v
    \e665
  • ax-icon-link
    \e666
  • ax-icon-link-h
    \e667
  • ax-icon-bar
    \e66c
  • ax-icon-pie
    \e66d
  • ax-icon-pie-fill
    \e66e
  • ax-icon-pie-alt-fill
    \e6be
  • ax-icon-bell
    \e674
  • ax-icon-bell-off
    \e675
  • ax-icon-bell-fill
    \e677
  • ax-icon-bell-off-fill
    \e676
  • ax-icon-compass
    \e678
  • ax-icon-compass-fill
    \e679
  • ax-icon-theme
    \e67a
  • ax-icon-theme-fill
    \e67b
  • ax-icon-bulb-t
    \e9b9
  • ax-icon-bulb
    \e67c
  • ax-icon-tbulb-fill
    \e67d
  • ax-icon-global
    \e67e
  • ax-icon-global-fill
    \e681

页面常用图标

  • ax-icon-scan
    \e776
  • ax-icon-barcode
    \e775
  • ax-icon-qrcode
    \e774
  • ax-icon-bag
    \e6a6
  • ax-icon-bag-fill
    \e6a8
  • ax-icon-cart
    \e6a7
  • ax-icon-cart-fill
    \e6a9
  • ax-icon-settings
    \e6ab
  • ax-icon-settings-fill
    \e6ac
  • ax-icon-settings-alt
    \e6aa
  • ax-icon-settings-alt-fill
    \e6ad
  • ax-icon-shield
    \e6ae
  • ax-icon-shield-fill
    \e6b1
  • ax-icon-shield-off
    \e6af
  • ax-icon-shield-off-fill
    \e6b0
  • ax-icon-people
    \e6b5
  • ax-icon-people-fill
    \e6c0
  • ax-icon-clock-t
    \e770
  • ax-icon-clock
    \e6cb
  • ax-icon-clock-fill
    \e6cc
  • ax-icon-box
    \e6d0
  • ax-icon-box-fill
    \e6d1
  • ax-icon-empty
    \e6d2
  • ax-icon-pin
    \e6d9
  • ax-icon-sun-fill
    \e6da
  • ax-icon-tags
    \e6e7
  • ax-icon-tags-fill
    \e6e8
  • ax-icon-star-half
    \e76a
  • ax-icon-star
    \e6ee
  • ax-icon-star-fill
    \e6ef
  • ax-icon-wifi
    \e6f0
  • ax-icon-wifi-off
    \e6f1
  • ax-icon-tv
    \e6f2
  • ax-icon-tv-fill
    \e6f3
  • ax-icon-cube
    \e6f4
  • ax-icon-cube-fill
    \e6f5
  • ax-icon-log-in
    \e6f7
  • ax-icon-log-out
    \e6f6
  • ax-icon-moon
    \e6f8
  • ax-icon-moon-fill
    \e6f9
  • ax-icon-flash
    \e6fb
  • ax-icon-flash-fill
    \e6fd
  • ax-icon-flash
    \ee6fa
  • ax-icon-flash-off-fill
    \e6fc
  • ax-icon-trending-down
    \e712
  • ax-icon-trending-up
    \e714
  • ax-icon-telephone
    \e713
  • ax-icon-telephone-fill
    \e715
  • ax-icon-pc
    \e719
  • ax-icon-pc-fill
    \e71a
  • ax-icon-pc
    \e71b
  • ax-icon-pc-fill
    \e71c
  • ax-icon-good
    \e727
  • ax-icon-good-fill
    \e725
  • ax-icon-bad
    \e728
  • ax-icon-good-fill
    \e726
  • ax-icon-org
    \e738
  • ax-icon-org-fill
    \e739
  • ax-icon-percent
    \e735
  • ax-icon-divide
    \e736
  • ax-icon-align-center
    \e737
  • ax-icon-align-right
    \e73c
  • ax-icon-align-justify
    \e73d
  • ax-icon-align-left
    \e73e
  • ax-icon-bigger
    \e741
  • ax-icon-smaller
    \e742
  • ax-icon-male
    \e748
  • ax-icon-female
    \e747
  • ax-icon-umbrella
    \e751
  • ax-icon-umbrella-fill
    \e752
  • ax-icon-award
    \e756
  • ax-icon-award-fill
    \e757
  • ax-icon-at
    \e758
  • ax-icon-hash
    \e759
  • ax-icon-power
    \e75a
  • ax-icon-gift
    \e75b
  • ax-icon-gift-fill
    \e75c
  • ax-icon-quote-left
    \e7f6
  • ax-icon-quote-left-fill
    \e75d
  • ax-icon-quote-right
    \e7f5
  • ax-icon-quote-right-fill
    \e970
  • ax-icon-arrowflag
    \e75e
  • ax-icon-fingerprint
    \e75f
  • ax-icon-repair
    \f15c

品牌

  • ax-icon-gitee
    \e782
  • ax-icon-github
    \e784
  • ax-icon-google
    \ee4f
  • ax-icon-microsoft
    \e78c
  • ax-icon-ios
    \eb1b
  • ax-icon-android
    \e788
  • ax-icon-codepen
    \ea0c
  • ax-icon-stackoverflow
    \e781
  • ax-icon-nodejs
    \e786
  • ax-icon-oschina
    \e785
  • ax-icon-csdn
    \e783
  • ax-icon-tmall
    \e77c
  • ax-icon-jd
    \e792
  • ax-icon-amazon
    \e77a
  • ax-icon-ebay
    \e78e
  • ax-icon-taobao
    \e78b
  • ax-icon-bilibili
    \e787
  • ax-icon-youku
    \e78d
  • ax-icon-iqiyi
    \e77f
  • ax-icon-tiktok
    \e790
  • ax-icon-xunlei
    \e791
  • ax-icon-huawei
    \e78f
  • ax-icon-aliyun
    \e78a
  • ax-icon-xiaomi
    \e7cb
  • ax-icon-zhihu
    \e789
  • ax-icon-baidu
    \e600
  • ax-icon-douban
    \e77b
  • ax-icon-163music
    \e77d
  • ax-icon-qqmusic
    \e780
  • ax-icon-css3
    \e77e
  • ax-icon-html5
    \e902

离线使用

用户可下载字体文件本地部署使用。本页面列出不定时更新的AX图标库。

文件名 发布时间 图标数量 操作
axfont-20210429.zip 20210429 438 下载