Icon font

Last updated: 12 days ago

Category: Basic

This framework comes with a built-in icon font (iconfont). Icons can be used either by applying the _icon[-*] style classes, or by writing the main name of the icon inside the tag and then applying th...

Page / Font Scaling16 days agoFont Family18 days agoIcon font12 days ago

Preface

To minimize network requests, this framework stores icons in base64 format within CSS - no additional font files need to be imported. The icon font family is named _iconfont. Currently there are icons in this framework.

Usage Methods

This framework provides two ways to use icons:

Apply _icon-* CSS classes to elements
Use _iconfont font family (or var(--_ff-icon) CSS variable) with the icon's English name as content

Output
HTML

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

Naming Conventions

Icons in this framework follow specific naming rules that intuitively convey their meaning:

Class names starting with _icon- indicate the element uses an icon font
Basic naming pattern: _icon-{main-feature}-{border-shape}-{fill-style}
Shape indicators:
- s stands for square (square border)
- o stands for circle (circular border)
Fill styles:
- f stands for fill (solid fill)
Arrangement indicators:
- h stands for horizontal (horizontal alignment)
- v stands for vertical (vertical alignment)
Line weight:
- t stands for thin (thin stroke)
Alternative styles:
- alt indicates an alternative version of the icon

Output
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 Support

Icons with text direction or directional indicators automatically flip in RTL (right-to-left) mode.
For example:

 (flips to right-pointing arrow in RTL)
 (flips to right-pointing triangle in RTL)

Icons with concrete meanings or universal recognition do not flip in RTL mode.
For example:

 (the Euro currency symbol)
 (checkmark in circular outline)

Arrows ()

_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

Editor ()

_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

Currency ()

_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

Form Controls ()

_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-s-gap
_icon-check-o-gap
_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-loader
_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-eye-off-alt
_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

Menu & Navigation ()

_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-badge-new
_icon-badge-vip
_icon-badge-hot

Social ()

_icon-phone
_icon-phone-f
_icon-phone-off
_icon-phone-off-f
_icon-phone-missed
_icon-phone-missed-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-qzone
_icon-qzone-f
_icon-renren-f
_icon-share
_icon-share-f
_icon-link-open

Media ()

_icon-apply
_icon-apply-f
_icon-calendar
_icon-calendar-f
_icon-printer
_icon-printer-f
_icon-seal
_icon-seal-f
_icon-seal-ok-f
_icon-seal-refuse-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-mic
_icon-mic-f
_icon-mic-off
_icon-mic-off-f
_icon-headphones
_icon-headphones-f
_icon-image
_icon-image-f
_icon-image-alt-f
_icon-camera
_icon-camera-f
_icon-music
_icon-music-f
_icon-email
_icon-email-f
_icon-video
_icon-video-f
_icon-video-off
_icon-video-off-f
_icon-code
_icon-code-download
_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-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-mute
_icon-volume-down
_icon-volume-up
_icon-volume-off
_icon-volume-mute-f
_icon-volume-down-f
_icon-volume-up-f
_icon-volume-off-f
_icon-attach
_icon-attach-v
_icon-link
_icon-link-h
_icon-bar
_icon-pie
_icon-pie-f
_icon-pie-alt-f
_icon-bell
_icon-bell-off
_icon-bell-f
_icon-bell-off-f
_icon-compass
_icon-compass-f
_icon-theme
_icon-theme-f
_icon-bulb-t
_icon-bulb
_icon-tbulb-f
_icon-global
_icon-global-f

Common UI ()

_icon-person
_icon-person-remove
_icon-person-add
_icon-person-done
_icon-person-delete
_icon-person-f
_icon-person-remove-f
_icon-person-add-f
_icon-person-done-f
_icon-person-delete-f
_icon-people
_icon-people-f
_icon-scan
_icon-barcode
_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-box
_icon-box-f
_icon-empty
_icon-pin
_icon-sun-f
_icon-tags
_icon-tags-f
_icon-star-half
_icon-star
_icon-star-f
_icon-wifi
_icon-wifi-off
_icon-tv
_icon-tv-f
_icon-cube
_icon-cube-f
_icon-login
_icon-login-f
_icon-logout
_icon-logout-f
_icon-moon
_icon-moon-f
_icon-flash
_icon-flash-f
_icon-flash
_icon-flash-off-f
_icon-trending-down
_icon-trending-up
_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-org
_icon-org-f
_icon-percent
_icon-divide
_icon-bigger
_icon-smaller
_icon-male
_icon-female
_icon-umbrella
_icon-umbrella-f
_icon-award
_icon-award-f
_icon-at
_icon-hash
_icon-power
_icon-gift
_icon-gift-f
_icon-arrowflag
_icon-fingerprint
_icon-repair

Payment Methods ()

_icon-paypal
_icon-unionpay
_icon-stripe
_icon-alipay
_icon-applepay
_icon-wechatpay
_icon-ideal
_icon-amazonpay
_icon-bancontact
_icon-mastercard
_icon-visa
_icon-klarna
_icon-amex
_icon-googlepay
_icon-wise
_icon-revolut
_icon-grabpay

Brands ()

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

Reset Style Initialization

19 days ago

Article

18 days ago

Icon font

Preface

Usage Methods

Naming Conventions

RTL Support

Arrows ()

Editor ()

Currency ()

Form Controls ()

Menu & Navigation ()

Social ()

Media ()

Common UI ()

Payment Methods ()

Brands ()

New Launch: 20% Off All Products