Iconfont图标字体

2024-06-19 00:14:46首发，5天前更新

本框架内置了一套图标字体（iconfont），通过_icon[-*]样式类使用图标字体；另外一种用法是将图标主体名称写在标签内，对该标签应用图标字体；图标字体库会持续不断地更新。

Iconfont图标字体5天前更新 ax-iconfont图标字体工程文件下载（FontCreator软件制作/.fcp格式） 需480金币6个月前更新

前言

为了减少网络请求，本框架的图标以base64格式存在于css中，用户无需另外引入图标字体文件。图标字体名称为_iconfont。截至目前本框架共有图标个。

使用方法

本框架图标有两种使用方法。

对元素使用_icon-*样式类；
对元素使用_iconfont字体或var(--_ff-icon)字体，内容使用图标英文名；

输出
HTML

close-o-f global
```
                
                
            
```

命名规则

本框架图标有自己特定的命名规则，通过图标名称可直观获知图标意义：

以_icon-开头的类名表示该元素使用图标字体；
基本命名规则是：_icon- 主体特点 - 边缘形状 - 填充方式；
边缘形状字符s是square缩写，表示方形边框；o是一个圆，表示圆形边框；
填充方式字符f是fill缩写，表示实心填充；
排列方式字符h是horizontal缩写，表示水平排列；v是vertical缩写，表示垂直排列
线条粗细字符t是thin缩写，表示细边；
一个图标可能存在两种风格，字符alt表示该图标的另外一种风格；

输出
HTML

- _icon-close
- _icon-close-o
- _icon-close-s
- _icon-close-o-f
- _icon-close-s-f
- _icon-close-t
- _icon-close-o-t
```
                
                
            
```

RTL支持

带有行文方向或指示方向的图标支持在rtl行文模式中调转方向；比如_icon-arrow-left、_icon-triangle-left等。

对于有实体意义的或国际通用的图标不会调转方向；比如_icon-eur、_icon-check-o等。

20250823更新个

_icon-save
_icon-save-f
_icon-straw
_icon-change
_icon-random

箭头类个

_icon-arrow-down-o
_icon-arrow-left-o
_icon-arrow-up-o
_icon-arrow-right-o
_icon-arrow-down-o-f
_icon-arrow-left-o-f
_icon-arrow-right-o-f
_icon-arrow-up-o-f
_icon-triangle-down
_icon-triangle-up
_icon-triangle-right
_icon-triangle-left
_icon-triangle-down-f
_icon-triangle-left-f
_icon-triangle-up-f
_icon-triangle-right-f
_icon-arrow-left-t
_icon-arrow-right-t
_icon-arrow-up-t
_icon-arrow-down-t
_icon-arrow-left
_icon-arrow-right
_icon-arrow-down
_icon-arrow-up
_icon-down-t
_icon-up-t
_icon-left-t
_icon-right-t
_icon-down
_icon-right
_icon-up
_icon-left
_icon-left-o
_icon-up-o
_icon-down-o
_icon-right-o
_icon-right-o-f
_icon-down-o-f
_icon-left-o-f
_icon-up-o-f
_icon-left-up
_icon-left-down
_icon-right-up
_icon-right-down
_icon-expand
_icon-expand-v
_icon-expand-h
_icon-collapse
_icon-collapse-v
_icon-collapse-h
_icon-min
_icon-max
_icon-corner-up-left
_icon-corner-left-down
_icon-corner-up-right
_icon-corner-right-up
_icon-corner-down-left
_icon-corner-left-up
_icon-corner-right-down
_icon-corner-down-right
_icon-down-double
_icon-left-double
_icon-right-double
_icon-up-double
_icon-dot-left
_icon-dot-right
_icon-pull-down
_icon-pull-up

编辑器类个

_icon-article
_icon-br
_icon-line-h
_icon-indent-more
_icon-indent-less
_icon-list-ul
_icon-list-ol
_icon-list-check
_icon-table
_icon-link-add
_icon-link-remove
_icon-text
_icon-font
_icon-font-color
_icon-font-bg
_icon-font-size
_icon-font-case
_icon-uppercase
_icon-lowercase
_icon-highlight
_icon-paragraph
_icon-rtl
_icon-ltr
_icon-underline
_icon-through
_icon-italic
_icon-bold
_icon-clean-format
_icon-quote-left
_icon-quote-left-f
_icon-quote-right
_icon-quote-right-f
_icon-code-inline
_icon-code-block
_icon-code-box
_icon-html-box
_icon-align-center
_icon-align-right
_icon-align-justify
_icon-align-left
_icon-subscript
_icon-superscript
_icon-heading
_icon-heading-1
_icon-heading-2
_icon-heading-3
_icon-heading-4
_icon-heading-5
_icon-heading-6

钱币类个

_icon-coin
_icon-coins
_icon-coin-f
_icon-coins-f
_icon-usd
_icon-usd-o
_icon-usd-o-f
_icon-cny
_icon-cny-o
_icon-cny-o-f
_icon-gbp
_icon-gbp-o
_icon-gbp-o-f
_icon-eur
_icon-eur-o
_icon-eur-o-f

表单类个

_icon-check-t
_icon-check
_icon-check-o-t
_icon-check-o
_icon-check-s
_icon-check-o-f
_icon-check-s-f
_icon-check-all
_icon-radio
_icon-radio-f
_icon-circle
_icon-close-t
_icon-close
_icon-close-o-t
_icon-close-o
_icon-close-s
_icon-close-o-f
_icon-close-s-f
_icon-backspace
_icon-backspace-f
_icon-import
_icon-export
_icon-plus-t
_icon-plus
_icon-plus-s
_icon-plus-o
_icon-plus-o-f
_icon-plus-s-f
_icon-minus-t
_icon-minus
_icon-minus-s
_icon-minus-o
_icon-minus-o-f
_icon-minus-s-f
_icon-warn-o-t
_icon-warn
_icon-warn-o
_icon-warn-o-f
_icon-info-o-t
_icon-info
_icon-info-o
_icon-info-o-f
_icon-issue
_icon-issue-o-t
_icon-issue-o
_icon-issue-o-f
_icon-slash
_icon-slash-f
_icon-slash-h
_icon-slash-h-f
_icon-sync
_icon-refresh
_icon-rotate-left
_icon-rotate-right
_icon-flip-v
_icon-flip-h
_icon-select
_icon-addpic
_icon-earth
_icon-earth-f
_icon-edit
_icon-edit-f
_icon-editing
_icon-editing-f
_icon-heart
_icon-heart-f
_icon-eye
_icon-eye-f
_icon-eye-off
_icon-eye-off-f
_icon-trash
_icon-trash-t
_icon-trash-f
_icon-trash-alt
_icon-trash-alt-f
_icon-lock
_icon-lock-f
_icon-unlock
_icon-unlock-f
_icon-toggle-left
_icon-toggle-left-f
_icon-toggle-right
_icon-toggle-right-f

菜单导航类个

_icon-options
_icon-options-f
_icon-options-v
_icon-options-v-f
_icon-menu
_icon-drag
_icon-more
_icon-more-v
_icon-menu-fold
_icon-menu-unfold
_icon-street
_icon-swap
_icon-sort
_icon-sort-az-down
_icon-sort-az-up
_icon-sort-num-up
_icon-sort-num-down
_icon-sort-amount-up
_icon-sort-amount-down
_icon-widgets
_icon-widgets-f
_icon-grid
_icon-grid-f
_icon-totop
_icon-tobottom
_icon-home
_icon-home-f
_icon-me
_icon-me-f
_icon-paperplane
_icon-paperplane-f
_icon-filter
_icon-filter-f
_icon-nav
_icon-nav-f
_icon-nav-v
_icon-nav-v-f
_icon-map
_icon-map-f
_icon-pin
_icon-pin-f
_icon-undo
_icon-undo-f
_icon-redo
_icon-redo-f

社交分享类个

_icon-phone
_icon-phone-f
_icon-phone-call
_icon-phone-call-f
_icon-message-s
_icon-message-s-f
_icon-message-o
_icon-message-o-f
_icon-npm
_icon-npm-f
_icon-instagram
_icon-instagram-f
_icon-facebook
_icon-facebook-f
_icon-twitter
_icon-twitter-f
_icon-google
_icon-google-f
_icon-pinterest
_icon-pinterest-f
_icon-linkedin
_icon-linkedin-f
_icon-vimeo
_icon-vimeo-f
_icon-reddit
_icon-reddit-f
_icon-telegram
_icon-telegram-f
_icon-twitch
_icon-twitch-f
_icon-snapchat
_icon-snapchat-f
_icon-spotify
_icon-spotify-f
_icon-youtube
_icon-youtube-f
_icon-line
_icon-line-f
_icon-discord
_icon-discord-f
_icon-whatsapp
_icon-whatsapp-f
_icon-kakaotalk
_icon-kakaotalk-f
_icon-threads
_icon-threads-f
_icon-tumblr
_icon-tumblr-f
_icon-weibo
_icon-weibo-f
_icon-wechat
_icon-wechat-f
_icon-qq
_icon-qq-f
_icon-share
_icon-share-f
_icon-link-open

媒体文件类个

_icon-thumb
_icon-apply
_icon-apply-f
_icon-calendar
_icon-calendar-f
_icon-printer
_icon-printer-f
_icon-play
_icon-play-o
_icon-play-o-f
_icon-pause
_icon-pause-o
_icon-pause-o-f
_icon-film
_icon-film-f
_icon-image
_icon-image-f
_icon-image-alt-f
_icon-music
_icon-music-f
_icon-email
_icon-email-f
_icon-code
_icon-code-o
_icon-code-o-f
_icon-download
_icon-download-t
_icon-upload
_icon-upload-t
_icon-cloud-download
_icon-cloud-upload
_icon-cloud-download-f
_icon-cloud-upload-f
_icon-search
_icon-zoomout
_icon-zoomin
_icon-zoomout-f
_icon-zoomin-f
_icon-zoom
_icon-zoom-f
_icon-file
_icon-file-remove
_icon-file-add
_icon-file-f
_icon-file-remove-f
_icon-file-add-f
_icon-file-text
_icon-file-text-f
_icon-folder
_icon-folder-open
_icon-folder-remove
_icon-folder-add
_icon-folder-f
_icon-folder-open-f
_icon-folder-remove-f
_icon-folder-add-f
_icon-copy
_icon-copy-f
_icon-volume-up
_icon-volume-up-f
_icon-attach
_icon-attach-v
_icon-link
_icon-link-h
_icon-pie
_icon-pie-f
_icon-pie-alt-f
_icon-bell
_icon-bell-f
_icon-compass
_icon-compass-f
_icon-theme
_icon-theme-f
_icon-bulb-t
_icon-bulb
_icon-tbulb-f
_icon-global
_icon-global-f

页面常用类个

_icon-person
_icon-person-f
_icon-people
_icon-people-f
_icon-qrcode
_icon-bag
_icon-bag-f
_icon-cart
_icon-cart-f
_icon-settings
_icon-settings-f
_icon-settings-alt
_icon-settings-alt-f
_icon-shield
_icon-shield-f
_icon-shield-off
_icon-shield-off-f
_icon-people
_icon-clock-t
_icon-clock
_icon-clock-f
_icon-empty
_icon-tags
_icon-tags-f
_icon-star-half
_icon-star
_icon-star-f
_icon-cube
_icon-cube-f
_icon-login
_icon-login-f
_icon-logout
_icon-logout-f
_icon-telephone
_icon-telephone-f
_icon-pc
_icon-pc-f
_icon-pad
_icon-pad-f
_icon-good
_icon-good-f
_icon-bad
_icon-good-f
_icon-bigger
_icon-smaller
_icon-umbrella
_icon-umbrella-f
_icon-award
_icon-award-f
_icon-at
_icon-hash
_icon-gift
_icon-gift-f
_icon-repair

品牌类个

_icon-gitee
_icon-github
_icon-tiktok