IconFont 图标
-
number_6#icon2-number_
-
number_7#icon2-number_1
-
number_9#icon2-number_2
-
number_0#icon2-number_3
-
number_3#icon2-number_4
-
number_1#icon2-number_5
-
number_4#icon2-number_6
-
number_8#icon2-number_7
-
number_punctuation#icon2-number_punctuation
-
number_5#icon2-number_8
-
number_2#icon2-number_9
-
add#icon2-add
-
3column#icon2-column
-
4column#icon2-column1
-
air-drop#icon2-air-drop
-
add-r#icon2-add-r
-
add-s#icon2-add-s
-
arrow-double-left#icon2-arrow-double-left
-
app#icon2-app
-
also-loan#icon2-also-loan
-
ascending#icon2-ascending
-
air#icon2-air
-
arrow-double-right#icon2-arrow-double-right
-
atm#icon2-atm
-
atm-away#icon2-atm-away
-
bad-r#icon2-bad-r
-
attendance#icon2-attendance
-
bad#icon2-bad
-
back-r#icon2-back-r
-
back#icon2-back
-
bank-card#icon2-bank-card
-
bar-chart#icon2-bar-chart
-
box#icon2-box
-
building#icon2-building
-
business#icon2-business
-
bill#icon2-bill
-
calculator#icon2-calculator
-
calendar#icon2-calendar
-
camera#icon2-camera
-
businesscard#icon2-businesscard
-
car#icon2-car
-
chat#icon2-chat
-
cangneishicao#icon2-cangneishicao
-
check#icon2-check
-
checkbox-selected#icon2-checkbox-selected
-
Chinese#icon2-Chinese
-
checkbox#icon2-checkbox
-
clock#icon2-clock
-
close#icon2-close
-
commodity#icon2-commodity
-
colthes#icon2-colthes
-
compare#icon2-compare
-
compass#icon2-compass
-
complain#icon2-complain
-
complete-r#icon2-complete-r
-
complete#icon2-complete
-
courier#icon2-courier
-
copy#icon2-copy
-
CSR#icon2-CSR
-
create-bill#icon2-create-bill
-
cut#icon2-cut
-
dashboard#icon2-dashboard
-
delete#icon2-delete
-
delivery#icon2-delivery
-
customs#icon2-customs
-
descending#icon2-descending
-
dialog#icon2-dialog
-
diamond#icon2-diamond
-
download#icon2-download
-
ding#icon2-ding
-
drop#icon2-drop
-
dollar#icon2-dollar
-
duihua#icon2-duihua
-
edit#icon2-edit
-
electronics#icon2-electronics
-
English#icon2-English
-
error-s#icon2-error-s
-
enclosure#icon2-enclosure
-
error-r#icon2-error-r
-
exclamatory-mark-r#icon2-exclamatory-mark-r
-
exchange#icon2-exchange
-
exclamatory-mark-t#icon2-exclamatory-mark-t
-
exclamatory-mark#icon2-exclamatory-mark
-
extend-r#icon2-extend-r
-
extend#icon2-extend
-
exit-fullscreen#icon2-exit-fullscreen
-
finance#icon2-finance
-
favorites#icon2-favorites
-
filter#icon2-filter
-
first-page#icon2-first-page
-
flash-lamp-auto#icon2-flash-lamp-auto
-
flash-lamp-off#icon2-flash-lamp-off
-
flash-lamp#icon2-flash-lamp
-
forward-r#icon2-forward-r
-
forbidden#icon2-forbidden
-
forward-sorting#icon2-forward-sorting
-
fullscreen#icon2-fullscreen
-
forward#icon2-forward
-
gifts#icon2-gifts
-
free#icon2-free
-
folder#icon2-folder
-
good-r#icon2-good-r
-
good#icon2-good
-
group#icon2-group
-
home#icon2-home
-
history#icon2-history
-
image-text#icon2-image-text
-
horizontal-retractio#icon2-horizontal-retractio
-
horizontal-expansion#icon2-horizontal-expansion
-
horn#icon2-horn
-
import#icon2-import
-
image#icon2-image
-
info-r#icon2-info-r
-
info#icon2-info
-
information#icon2-information
-
key#icon2-key
-
international#icon2-international
-
keyboard#icon2-keyboard
-
last-page#icon2-last-page
-
increase#icon2-increase
-
left#icon2-left
-
letter#icon2-letter
-
lefy-exchange#icon2-lefy-exchange
-
left-sorting#icon2-left-sorting
-
light#icon2-light
-
like#icon2-like
-
link#icon2-link
-
line#icon2-line
-
load#icon2-load
-
loading-2#icon2-loading-
-
loading-1#icon2-loading-1
-
lock#icon2-lock
-
loan#icon2-loan
-
location#icon2-location
-
logistics#icon2-logistics
-
macbook#icon2-macbook
-
logout#icon2-logout
-
minus-r#icon2-minus-r
-
map-1#icon2-map-
-
map-2#icon2-map-1
-
mic#icon2-mic
-
minus#icon2-minus
-
mobile-Phone#icon2-mobile-Phone
-
minus-s#icon2-minus-s
-
money#icon2-money
-
monitor#icon2-monitor
-
money-bill#icon2-money-bill
-
moneys#icon2-moneys
-
more-transverse#icon2-more-transverse
-
locker#icon2-locker
-
more-vertical#icon2-more-vertical
-
nav-list#icon2-nav-list
-
news#icon2-news
-
no-attendance#icon2-no-attendance
-
not-sign#icon2-not-sign
-
navigation#icon2-navigation
-
network#icon2-network
-
notice#icon2-notice
-
office#icon2-office
-
operation#icon2-operation
-
package#icon2-package
-
organization#icon2-organization
-
open-package#icon2-open-package
-
paste#icon2-paste
-
paly#icon2-paly
-
pause#icon2-pause
-
phone-r#icon2-phone-r
-
PDA#icon2-PDA
-
pie-chart#icon2-pie-chart
-
position#icon2-position
-
power#icon2-power
-
prine#icon2-prine
-
quality#icon2-quality
-
question-mark-r#icon2-question-mark-r
-
process#icon2-process
-
ppt#icon2-ppt
-
question-mark#icon2-question-mark
-
Raidobox-selectedRai#icon2-Raidobox-selectedRai
-
red-packet#icon2-red-packet
-
radar#icon2-radar
-
refund#icon2-refund
-
register#icon2-register
-
Raidobox#icon2-Raidobox
-
resource#icon2-resource
-
refresh#icon2-refresh
-
reverse-sorting#icon2-reverse-sorting
-
relationship#icon2-relationship
-
right-exchange#icon2-right-exchange
-
rise#icon2-rise
-
right#icon2-right
-
right-sorting#icon2-right-sorting
-
RMB#icon2-RMB
-
satisfy#icon2-satisfy
-
safe#icon2-safe
-
rule#icon2-rule
-
save#icon2-save
-
scan#icon2-scan
-
schedule#icon2-schedule
-
screwdriver#icon2-screwdriver
-
search#icon2-search
-
service#icon2-service
-
security#icon2-security
-
settlement#icon2-settlement
-
setup#icon2-setup
-
share#icon2-share
-
setting#icon2-setting
-
shield#icon2-shield
-
shopping-cart#icon2-shopping-cart
-
signed#icon2-signed
-
shrink#icon2-shrink
-
shrink-r#icon2-shrink-r
-
shoppingbag#icon2-shoppingbag
-
similar-product#icon2-similar-product
-
slide#icon2-slide
-
sort#icon2-sort
-
stop#icon2-stop
-
stock#icon2-stock
-
standard#icon2-standard
-
sorting#icon2-sorting
-
storage#icon2-storage
-
store#icon2-store
-
tag-subscript#icon2-tag-subscript
-
tag-selected#icon2-tag-selected
-
table#icon2-table
-
survey#icon2-survey
-
sync#icon2-sync
-
tag#icon2-tag
-
task#icon2-task
-
top#icon2-top
-
time#icon2-time
-
transfer-station#icon2-transfer-station
-
text#icon2-text
-
trend-chart#icon2-trend-chart
-
template#icon2-template
-
unlock#icon2-unlock
-
upload#icon2-upload
-
unsatisfy#icon2-unsatisfy
-
unseen#icon2-unseen
-
user-r#icon2-user-r
-
user#icon2-user
-
usually#icon2-usually
-
vedio#icon2-vedio
-
vertical-expansion#icon2-vertical-expansion
-
vertical-retraction#icon2-vertical-retraction
-
visible#icon2-visible
-
view-list#icon2-view-list
-
volume#icon2-volume
-
view-matrix#icon2-view-matrix
-
volumeopen#icon2-volumeopen
-
wallet#icon2-wallet
-
wave#icon2-wave
-
warehouse#icon2-warehouse
-
word#icon2-word
-
3column-o#icon2-column-o
-
add-o#icon2-add-o
-
4column-o#icon2-column-o1
-
add-s-o#icon2-add-s-o
-
add-r-o#icon2-add-r-o
-
air-drop-o#icon2-air-drop-o
-
app-o#icon2-app-o
-
arrow-double-right-o#icon2-arrow-double-right-o
-
also-loan-o#icon2-also-loan-o
-
air-o#icon2-air-o
-
arrow-double-left-o#icon2-arrow-double-left-o
-
ascending-o#icon2-ascending-o
-
atm-o#icon2-atm-o
-
back-o#icon2-back-o
-
attendance-o#icon2-attendance-o
-
atm-away-o#icon2-atm-away-o
-
back-r-o#icon2-back-r-o
-
bad-o#icon2-bad-o
-
bill-o#icon2-bill-o
-
bank-card-o#icon2-bank-card-o
-
bar-chart-o#icon2-bar-chart-o
-
box-o#icon2-box-o
-
business-o#icon2-business-o
-
bad-r-o#icon2-bad-r-o
-
businesscard-o#icon2-businesscard-o
-
building-o#icon2-building-o
-
calculator-o#icon2-calculator-o
-
camera-o#icon2-camera-o
-
cangneishicao-o#icon2-cangneishicao-o
-
car-o#icon2-car-o
-
calendar-o#icon2-calendar-o
-
chat-o#icon2-chat-o
-
checkbox-selected-o#icon2-checkbox-selected-o
-
checkbox-o#icon2-checkbox-o
-
clock-o#icon2-clock-o
-
check-o#icon2-check-o
-
Chinese-o#icon2-Chinese-o
-
close-o#icon2-close-o
-
commodity-o#icon2-commodity-o
-
complain-o#icon2-complain-o
-
compare-o#icon2-compare-o
-
compass-o#icon2-compass-o
-
complete-o#icon2-complete-o
-
complete-r-o#icon2-complete-r-o
-
copy-o#icon2-copy-o
-
courier-o#icon2-courier-o
-
CSR-o#icon2-CSR-o
-
create-bill-o#icon2-create-bill-o
-
colthes-o#icon2-colthes-o
-
cut-o#icon2-cut-o
-
delete-o#icon2-delete-o
-
dashboard-o#icon2-dashboard-o
-
descending-o#icon2-descending-o
-
delivery-o#icon2-delivery-o
-
dialog-o#icon2-dialog-o
-
customs-o#icon2-customs-o
-
diamond-o#icon2-diamond-o
-
dollar-o#icon2-dollar-o
-
ding-o#icon2-ding-o
-
download-o#icon2-download-o
-
duihua-o#icon2-duihua-o
-
edit-o#icon2-edit-o
-
error-r-o#icon2-error-r-o
-
electronics-o#icon2-electronics-o
-
enclosure-o#icon2-enclosure-o
-
English-o#icon2-English-o
-
drop-o#icon2-drop-o
-
error-s-o#icon2-error-s-o
-
exchange-o#icon2-exchange-o
-
exclamatory-mark-t-o#icon2-exclamatory-mark-t-o
-
exclamatory-mark-r-o#icon2-exclamatory-mark-r-o
-
exclamatory-mark-o#icon2-exclamatory-mark-o
-
extend-o#icon2-extend-o
-
exit-fullscreen-o#icon2-exit-fullscreen-o
-
filter-o#icon2-filter-o
-
first-page-o#icon2-first-page-o
-
flash-lamp-auto-o#icon2-flash-lamp-auto-o
-
extend-r-o#icon2-extend-r-o
-
favorites-o#icon2-favorites-o
-
finance-o#icon2-finance-o
-
flash-lamp-o#icon2-flash-lamp-o
-
folder-o#icon2-folder-o
-
flash-lamp-off-o#icon2-flash-lamp-off-o
-
forward-o#icon2-forward-o
-
forbidden-o#icon2-forbidden-o
-
forward-r-o#icon2-forward-r-o
-
free-o#icon2-free-o
-
good-o#icon2-good-o
-
fullscreen-o#icon2-fullscreen-o
-
forward-sorting-o#icon2-forward-sorting-o
-
gifts-o#icon2-gifts-o
-
good-r-o#icon2-good-r-o
-
home-o#icon2-home-o
-
group-o#icon2-group-o
-
history-o#icon2-history-o
-
horizontal-retractio#icon2-horizontal-retractio1
-
horizontal-expansion#icon2-horizontal-expansion1
-
horn-o#icon2-horn-o
-
image-text-o#icon2-image-text-o
-
image-o#icon2-image-o
-
info-o#icon2-info-o
-
increase-o#icon2-increase-o
-
info-r-o#icon2-info-r-o
-
import-o#icon2-import-o
-
information-o#icon2-information-o
-
key-o#icon2-key-o
-
keyboard-o#icon2-keyboard-o
-
international-o#icon2-international-o
-
last-page-o#icon2-last-page-o
-
left-o#icon2-left-o
-
lefy-exchange-o#icon2-lefy-exchange-o
-
left-sorting-o#icon2-left-sorting-o
-
letter-o#icon2-letter-o
-
light-o#icon2-light-o
-
like-o#icon2-like-o
-
line-o#icon2-line-o
-
link-o#icon2-link-o
-
load-o#icon2-load-o
-
loading-1-o#icon2-loading--o
-
loading-2-o#icon2-loading--o1
-
loan-o#icon2-loan-o
-
location-o#icon2-location-o
-
locker-o#icon2-locker-o
-
logistics-o#icon2-logistics-o
-
lock-o#icon2-lock-o
-
macbook-o#icon2-macbook-o
-
map-1-o#icon2-map--o
-
logout-o#icon2-logout-o
-
map-2-o#icon2-map--o1
-
minus-o#icon2-minus-o
-
mic-o#icon2-mic-o
-
mobile-Phone-o#icon2-mobile-Phone-o
-
minus-r-o#icon2-minus-r-o
-
minus-s-o#icon2-minus-s-o
-
money-bill-o#icon2-money-bill-o
-
money-o#icon2-money-o
-
moneys-o#icon2-moneys-o
-
monitor-o#icon2-monitor-o
-
more-vertical-o#icon2-more-vertical-o
-
nav-list-o#icon2-nav-list-o
-
navigation-o#icon2-navigation-o
-
network-o#icon2-network-o
-
more-transverse-o#icon2-more-transverse-o
-
news-o#icon2-news-o
-
no-attendance-o#icon2-no-attendance-o
-
notice-o#icon2-notice-o
-
not-sign-o#icon2-not-sign-o
-
open-package-o#icon2-open-package-o
-
office-o#icon2-office-o
-
operation-o#icon2-operation-o
-
organization-o#icon2-organization-o
-
package-o#icon2-package-o
-
paly-o#icon2-paly-o
-
pause-o#icon2-pause-o
-
paste-o#icon2-paste-o
-
pie-chart-o#icon2-pie-chart-o
-
PDA-o#icon2-PDA-o
-
phone-r-o#icon2-phone-r-o
-
ppt-o#icon2-ppt-o
-
power-o#icon2-power-o
-
position-o#icon2-position-o
-
prine-o#icon2-prine-o
-
quality-o#icon2-quality-o
-
process-o#icon2-process-o
-
question-mark-o#icon2-question-mark-o
-
question-mark-r-o#icon2-question-mark-r-o
-
radar-o#icon2-radar-o
-
Raidobox-o#icon2-Raidobox-o
-
Raidobox-selectedRai#icon2-Raidobox-selectedRai1
-
red-packet-o#icon2-red-packet-o
-
refresh-o#icon2-refresh-o
-
register-o#icon2-register-o
-
refund-o#icon2-refund-o
-
resource-o#icon2-resource-o
-
relationship-o#icon2-relationship-o
-
reverse-sorting-o#icon2-reverse-sorting-o
-
right-exchange-o#icon2-right-exchange-o
-
rise-o#icon2-rise-o
-
rule-o#icon2-rule-o
-
right-o#icon2-right-o
-
right-sorting-o#icon2-right-sorting-o
-
RMB-o#icon2-RMB-o
-
safe-o#icon2-safe-o
-
scan-o#icon2-scan-o
-
satisfy-o#icon2-satisfy-o
-
save-o#icon2-save-o
-
screwdriver-o#icon2-screwdriver-o
-
schedule-o#icon2-schedule-o
-
search-o#icon2-search-o
-
security-o#icon2-security-o
-
settlement-o#icon2-settlement-o
-
service-o#icon2-service-o
-
setting-o#icon2-setting-o
-
setup-o#icon2-setup-o
-
shoppingbag-o#icon2-shoppingbag-o
-
share-o#icon2-share-o
-
shopping-cart-o#icon2-shopping-cart-o
-
shield-o#icon2-shield-o
-
shrink-r-o#icon2-shrink-r-o
-
shrink-o#icon2-shrink-o
-
signed-o#icon2-signed-o
-
similar-product-o#icon2-similar-product-o
-
sort-o#icon2-sort-o
-
slide-o#icon2-slide-o
-
sorting-o#icon2-sorting-o
-
stock-o#icon2-stock-o
-
stop-o#icon2-stop-o
-
standard-o#icon2-standard-o
-
storage-o#icon2-storage-o
-
survey-o#icon2-survey-o
-
store-o#icon2-store-o
-
table-o#icon2-table-o
-
tag-o#icon2-tag-o
-
tag-selected-o#icon2-tag-selected-o
-
sync-o#icon2-sync-o
-
task-o#icon2-task-o
-
tag-subscript-o#icon2-tag-subscript-o
-
template-o#icon2-template-o
-
text-o#icon2-text-o
-
time-o#icon2-time-o
-
top-o#icon2-top-o
-
transfer-station-o#icon2-transfer-station-o
-
trend-chart-o#icon2-trend-chart-o
-
unlock-o#icon2-unlock-o
-
unsatisfy-o#icon2-unsatisfy-o
-
user-o#icon2-user-o
-
unseen-o#icon2-unseen-o
-
upload-o#icon2-upload-o
-
usually-o#icon2-usually-o
-
vedio-o#icon2-vedio-o
-
user-r-o#icon2-user-r-o
-
view-list-o#icon2-view-list-o
-
vertical-expansion-o#icon2-vertical-expansion-o
-
vertical-retraction-#icon2-vertical-retraction-
-
volume-o#icon2-volume-o
-
view-matrix-o#icon2-view-matrix-o
-
visible-o#icon2-visible-o
-
wallet-o#icon2-wallet-o
-
volumeopen-o#icon2-volumeopen-o
-
warehouse-o#icon2-warehouse-o
-
wave-o#icon2-wave-o
-
word-o#icon2-word-o
-
arrow-down#icon2-arrow-down
-
arrow-left#icon2-arrow-left
-
arrow-right#icon2-arrow-right
-
arrow-up#icon2-arrow-up
-
arrow-down#icon2-arrow-down1
-
arrow-right#icon2-arrow-right1
-
arrow-left#icon2-arrow-left1
-
arrow-up#icon2-arrow-up1
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
<script src="./iconfont.js"></script>
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon2-xxx"></use>
</svg>