Iconfont 图标

简介

因为图标在任何项目始终都是需要的,而且避免更多的网络请求,故而AXUI的图标库从iconfont.cn平台移除,以base64的形式存在ax.css中,用户不需要再另外引用图标字体。

如果用户需要使用自己的图标字体代替ax-iconfont,那么可以自行在ax.css删除ax-iconfont代码部分(主要是base64文件和字体before伪类)。

使用方法

base64的图标字体有两种用法:

  • 1、对标签使用ax-iconfont ax-icon-*,比如<span class="ax-iconfont ax-icon-arrow-down-o"></span>。最终结果是:
  • 2、对标签使用ax-iconfont,同时在标签内填写图标名,比如<span class="ax-iconfont">arrow-down-o</span>。最终结果是:arrow-down-o

命名规则

图标命名规则是:ax-icon- + 特点 + 形状 + 填充,形状一般是circle和square,简写为o和s;如果是纯色填充则加上f。比如ax-icon-close-o-f表示:带圆圈的关闭图标,同时纯色填充,显示结果为:

系列图标举例:

  • ax-icon-close
  • ax-icon-close-o
  • ax-icon-close-s
  • ax-icon-close-o-f
  • ax-icon-close-s-f

其他规则还有:-h表示水平排列;-v表示垂直排列;-t表示纤细;-alt表示另外一种风格

AX图标库

共有图标个。

箭头类

  • ax-icon-arrow-down-o
  • ax-icon-arrow-left-o
  • ax-icon-arrow-up-o
  • ax-icon-arrow-right-o
  • ax-icon-arrow-down-o-f
  • ax-icon-arrow-left-o-f
  • ax-icon-arrow-right-o-f
  • ax-icon-arrow-up-o-f
  • ax-icon-triangle-down
  • ax-icon-triangle-up
  • ax-icon-triangle-right
  • ax-icon-triangle-left
  • ax-icon-triangle-down-f
  • ax-icon-triangle-left-f
  • ax-icon-triangle-up-f
  • ax-icon-triangle-right-f
  • ax-icon-arrow-left-t
  • ax-icon-arrow-right-t
  • ax-icon-arrow-up-t
  • ax-icon-arrow-down-t
  • ax-icon-arrow-left
  • ax-icon-arrow-right
  • ax-icon-arrow-down
  • ax-icon-arrow-up
  • ax-icon-down-t
  • ax-icon-up-t
  • ax-icon-left-t
  • ax-icon-right-t
  • ax-icon-down
  • ax-icon-right
  • ax-icon-up
  • ax-icon-left
  • ax-icon-left-o
  • ax-icon-up-o
  • ax-icon-down-o
  • ax-icon-right-o
  • ax-icon-right-o-f
  • ax-icon-down-o-f
  • ax-icon-left-o-f
  • ax-icon-up-o-f
  • ax-icon-left-up
  • ax-icon-left-down
  • ax-icon-right-up
  • ax-icon-right-down
  • ax-icon-expand
  • ax-icon-collapse
  • ax-icon-corner-up-left
  • ax-icon-corner-left-down
  • ax-icon-corner-up-right
  • ax-icon-corner-right-up
  • ax-icon-corner-left-up
  • ax-icon-corner-left-up
  • ax-icon-corner-right-down
  • ax-icon-corner-down-right
  • ax-icon-down-double
  • ax-icon-left-double
  • ax-icon-right-double
  • ax-icon-up-double
  • ax-icon-dot-left
  • ax-icon-dot-right
  • ax-icon-pull-down
  • ax-icon-pull-up

表单类

  • ax-icon-check-t
  • ax-icon-check
  • ax-icon-check-o-t
  • ax-icon-check-o
  • ax-icon-check-s
  • ax-icon-check-o-f
  • ax-icon-check-s-f
  • ax-icon-check-s-gap
  • ax-icon-check-o-gap
  • ax-icon-check-all
  • ax-icon-radio
  • ax-icon-radio-f
  • ax-icon-circle
  • ax-icon-close-t
  • ax-icon-close
  • ax-icon-close-o-t
  • ax-icon-close-o
  • ax-icon-close-s
  • ax-icon-close-o-f
  • ax-icon-close-s-f
  • ax-icon-backspace
  • ax-icon-backspace-f
  • ax-icon-import
  • ax-icon-export
  • ax-icon-plus-t
  • ax-icon-plus
  • ax-icon-plus-s
  • ax-icon-plus-o
  • ax-icon-plus-o-f
  • ax-icon-plus-s-f
  • ax-icon-minus-t
  • ax-icon-minus
  • ax-icon-minus-s
  • ax-icon-minus-o
  • ax-icon-minus-o-f
  • ax-icon-minus-s-f
  • ax-icon-warning-o-t
  • ax-icon-warning-o
  • ax-icon-warning-o-f
  • ax-icon-info-o-t
  • ax-icon-info-o
  • ax-icon-info-o-f
  • ax-icon-question
  • ax-icon-question-o-t
  • ax-icon-question-o
  • ax-icon-question-o-f
  • ax-icon-slash
  • ax-icon-slash-f
  • ax-icon-slash-h
  • ax-icon-slash-h-f
  • ax-icon-sync
  • ax-icon-refresh
  • ax-icon-loader
  • ax-icon-select
  • ax-icon-addpic
  • ax-icon-earth
  • ax-icon-earth-f
  • ax-icon-edit
  • ax-icon-edit-f
  • ax-icon-editing
  • ax-icon-editing-f
  • ax-icon-heart
  • ax-icon-heart-f
  • ax-icon-eye
  • ax-icon-eye-f
  • ax-icon-eye-off
  • ax-icon-eye-off-f
  • ax-icon-eye-off-alt
  • ax-icon-trash
  • ax-icon-trash-t
  • ax-icon-trash-f
  • ax-icon-trash-alt
  • ax-icon-trash-alt-f
  • ax-icon-lock
  • ax-icon-lock-f
  • ax-icon-unlock
  • ax-icon-unlock-f
  • ax-icon-toggle-left
  • ax-icon-toggle-left-f
  • ax-icon-toggle-right
  • ax-icon-toggle-right-f

菜单导航类

  • ax-icon-options
  • ax-icon-options-f
  • ax-icon-options-v
  • ax-icon-options-v-f
  • ax-icon-list
  • ax-icon-menu
  • ax-icon-more
  • ax-icon-more-v
  • ax-icon-menu-fold
  • ax-icon-menu-unfold
  • ax-icon-street
  • ax-icon-swap
  • ax-icon-sort
  • ax-icon-list-ol
  • ax-icon-sort-az-down
  • ax-icon-sort-az-up
  • ax-icon-sort-num-up
  • ax-icon-sort-num-down
  • ax-icon-sort-amount-up
  • ax-icon-sort-amount-down
  • ax-icon-widgets
  • ax-icon-widgets-f
  • ax-icon-grid
  • ax-icon-grid-f
  • ax-icon-totop
  • ax-icon-tobottom
  • ax-icon-home
  • ax-icon-home-f
  • ax-icon-me
  • ax-icon-me-f
  • ax-icon-paperplane
  • ax-icon-paperplane-f
  • ax-icon-filter
  • ax-icon-filter-f
  • ax-icon-nav
  • ax-icon-nav-f
  • ax-icon-nav-v
  • ax-icon-nav-v-f
  • ax-icon-map
  • ax-icon-map-f
  • ax-icon-pin
  • ax-icon-pin-f
  • ax-icon-undo
  • ax-icon-undo-f
  • ax-icon-redo
  • ax-icon-redo-f
  • ax-icon-badge-new
  • ax-icon-badge-vip
  • ax-icon-badge-hot

社交分享类

  • ax-icon-phone
  • ax-icon-phone-f
  • ax-icon-phone-off
  • ax-icon-phone-off-f
  • ax-icon-phone-missed
  • ax-icon-phone-missed-f
  • ax-icon-phone-call
  • ax-icon-phone-call-f
  • ax-icon-message-s
  • ax-icon-message-s-f
  • ax-icon-message-o
  • ax-icon-message-o-f
  • ax-icon-instagram
  • ax-icon-instagram-f
  • ax-icon-facebook
  • ax-icon-facebook-f
  • ax-icon-twitter
  • ax-icon-twitter-f
  • ax-icon-google
  • ax-icon-google-f
  • ax-icon-tumblr
  • ax-icon-tumblr-f
  • ax-icon-weibo
  • ax-icon-weibo-f
  • ax-icon-wechat
  • ax-icon-wechat-f
  • ax-icon-qq
  • ax-icon-qq-f
  • ax-icon-qzone
  • ax-icon-qzone-f
  • ax-icon-renren-f
  • ax-icon-share
  • ax-icon-share-f
  • ax-icon-link-open

媒体文件类

  • ax-icon-apply
  • ax-icon-apply-f
  • ax-icon-calendar
  • ax-icon-calendar-f
  • ax-icon-printer
  • ax-icon-printer-f
  • ax-icon-seal
  • ax-icon-seal-f
  • ax-icon-seal-ok-f
  • ax-icon-seal-refuse-f
  • ax-icon-play
  • ax-icon-play-o
  • ax-icon-play-o-f
  • ax-icon-pause
  • ax-icon-pause-o
  • ax-icon-pause-o-f
  • ax-icon-film
  • ax-icon-film-f
  • ax-icon-mic
  • ax-icon-mic-f
  • ax-icon-mic-off
  • ax-icon-mic-off-f
  • ax-icon-headphones
  • ax-icon-headphones-f
  • ax-icon-image
  • ax-icon-image-f
  • ax-icon-image-alt-f
  • ax-icon-camera
  • ax-icon-camera-f
  • ax-icon-music
  • ax-icon-music-f
  • ax-icon-email
  • ax-icon-email-f
  • ax-icon-video
  • ax-icon-video-f
  • ax-icon-video-off
  • ax-icon-video-off-f
  • ax-icon-code
  • ax-icon-code-download
  • ax-icon-code-o
  • ax-icon-code-o-f
  • ax-icon-download
  • ax-icon-download-t
  • ax-icon-upload
  • ax-icon-upload-t
  • ax-icon-cloud-download
  • ax-icon-cloud-upload
  • ax-icon-cloud-download-f
  • ax-icon-cloud-upload-f
  • ax-icon-search
  • ax-icon-zoomout
  • ax-icon-zoomin
  • ax-icon-zoomout-f
  • ax-icon-zoomin-f
  • ax-icon-file
  • ax-icon-file-remove
  • ax-icon-file-add
  • ax-icon-file-f
  • ax-icon-file-remove-f
  • ax-icon-file-add-f
  • ax-icon-file-text
  • ax-icon-file-text-f
  • ax-icon-folder
  • ax-icon-folder-open
  • ax-icon-folder-remove
  • ax-icon-folder-add
  • ax-icon-folder-f
  • ax-icon-folder-open-f
  • ax-icon-folder-remove-f
  • ax-icon-folder-add-f
  • ax-icon-copy
  • ax-icon-copy-f
  • ax-icon-volume-mute
  • ax-icon-volume-down
  • ax-icon-volume-up
  • ax-icon-volume-off
  • ax-icon-volume-mute-f
  • ax-icon-volume-down-f
  • ax-icon-volume-up-f
  • ax-icon-volume-off-f
  • ax-icon-attach
  • ax-icon-attach-v
  • ax-icon-link
  • ax-icon-link-h
  • ax-icon-bar
  • ax-icon-pie
  • ax-icon-pie-f
  • ax-icon-pie-alt-f
  • ax-icon-bell
  • ax-icon-bell-off
  • ax-icon-bell-f
  • ax-icon-bell-off-f
  • ax-icon-compass
  • ax-icon-compass-f
  • ax-icon-theme
  • ax-icon-theme-f
  • ax-icon-bulb-t
  • ax-icon-bulb
  • ax-icon-tbulb-f
  • ax-icon-global
  • ax-icon-global-f

页面常用图标

  • ax-icon-person
  • ax-icon-person-remove
  • ax-icon-person-add
  • ax-icon-person-done
  • ax-icon-person-delete
  • ax-icon-person-f
  • ax-icon-person-remove-f
  • ax-icon-person-add-f
  • ax-icon-person-done-f
  • ax-icon-person-delete-f
  • ax-icon-people
  • ax-icon-people-f
  • ax-icon-scan
  • ax-icon-barcode
  • ax-icon-qrcode
  • ax-icon-bag
  • ax-icon-bag-f
  • ax-icon-cart
  • ax-icon-cart-f
  • ax-icon-settings
  • ax-icon-settings-f
  • ax-icon-settings-alt
  • ax-icon-settings-alt-f
  • ax-icon-shield
  • ax-icon-shield-f
  • ax-icon-shield-off
  • ax-icon-shield-off-f
  • ax-icon-people
  • ax-icon-clock-t
  • ax-icon-clock
  • ax-icon-clock-f
  • ax-icon-box
  • ax-icon-box-f
  • ax-icon-empty
  • ax-icon-pin
  • ax-icon-sun-f
  • ax-icon-tags
  • ax-icon-tags-f
  • ax-icon-star-half
  • ax-icon-star
  • ax-icon-star-f
  • ax-icon-wifi
  • ax-icon-wifi-off
  • ax-icon-tv
  • ax-icon-tv-f
  • ax-icon-cube
  • ax-icon-cube-f
  • ax-icon-login
  • ax-icon-logout
  • ax-icon-moon
  • ax-icon-moon-f
  • ax-icon-flash
  • ax-icon-flash-f
  • ax-icon-flash
  • ax-icon-flash-off-f
  • ax-icon-trending-down
  • ax-icon-trending-up
  • ax-icon-telephone
  • ax-icon-telephone-f
  • ax-icon-pc
  • ax-icon-pc-f
  • ax-icon-pad
  • ax-icon-pad-f
  • ax-icon-good
  • ax-icon-good-f
  • ax-icon-bad
  • ax-icon-good-f
  • ax-icon-org
  • ax-icon-org-f
  • ax-icon-percent
  • ax-icon-divide
  • ax-icon-align-center
  • ax-icon-align-right
  • ax-icon-align-justify
  • ax-icon-align-left
  • ax-icon-bigger
  • ax-icon-smaller
  • ax-icon-male
  • ax-icon-female
  • ax-icon-umbrella
  • ax-icon-umbrella-f
  • ax-icon-award
  • ax-icon-award-f
  • ax-icon-at
  • ax-icon-hash
  • ax-icon-power
  • ax-icon-gift
  • ax-icon-gift-f
  • ax-icon-quote-left
  • ax-icon-quote-left-f
  • ax-icon-quote-right
  • ax-icon-quote-right-f
  • ax-icon-arrowflag
  • ax-icon-fingerprint
  • ax-icon-repair

品牌

  • ax-icon-gitee
  • ax-icon-github
  • ax-icon-microsoft
  • ax-icon-ios
  • ax-icon-android
  • ax-icon-codepen
  • ax-icon-stackoverflow
  • ax-icon-nodejs
  • ax-icon-oschina
  • ax-icon-csdn
  • ax-icon-tmall
  • ax-icon-jd
  • ax-icon-amazon
  • ax-icon-ebay
  • ax-icon-taobao
  • ax-icon-bilibili
  • ax-icon-youku
  • ax-icon-iqiyi
  • ax-icon-tiktok
  • ax-icon-xunlei
  • ax-icon-huawei
  • ax-icon-aliyun
  • ax-icon-xiaomi
  • ax-icon-zhihu
  • ax-icon-baidu
  • ax-icon-douban
  • ax-icon-163music
  • ax-icon-qqmusic
  • ax-icon-css3
  • ax-icon-html5