-
客服 选中
.custom-icon-tubiao-
-
column-3
.custom-icon-3column
-
column-4
.custom-icon-column-4
-
add
.custom-icon-add
-
add-circle
.custom-icon-add-circle
-
adjust
.custom-icon-adjust
-
arrow-up-circle
.custom-icon-arrow-up-circle
-
arrow-right-circle
.custom-icon-arrow-right-circle
-
arrow-down
.custom-icon-arrow-down
-
ashbin
.custom-icon-ashbin
-
arrow-right
.custom-icon-arrow-right
-
browse
.custom-icon-browse
-
bottom
.custom-icon-bottom
-
back
.custom-icon-back
-
bad
.custom-icon-bad
-
arrow-double-left
.custom-icon-arrow-double-left
-
arrow-left-circle
.custom-icon-arrow-left-circle
-
arrow-double-right
.custom-icon-arrow-double-right
-
caps-lock
.custom-icon-caps-lock
-
camera
.custom-icon-camera
-
chart-bar
.custom-icon-chart-bar
-
attachment
.custom-icon-attachment
-
code
.custom-icon-code
-
close
.custom-icon-close
-
check-item
.custom-icon-check-item
-
calendar
.custom-icon-calendar
-
comment
.custom-icon-comment
-
column-vertical
.custom-icon-column-vertical
-
column-horizontal
.custom-icon-column-horizontal
-
complete
.custom-icon-complete
-
chart-pie
.custom-icon-chart-pie
-
cry
.custom-icon-cry
-
customer-service
.custom-icon-customer-service
-
delete
.custom-icon-delete
-
direction-down
.custom-icon-direction-down
-
copy
.custom-icon-copy
-
cut
.custom-icon-cut
-
data-view
.custom-icon-data-view
-
direction-down-circle
.custom-icon-direction-down-circle
-
direction-right
.custom-icon-direction-right
-
direction-up
.custom-icon-direction-up
-
discount
.custom-icon-discount
-
direction-left
.custom-icon-direction-left
-
download
.custom-icon-download
-
electronics
.custom-icon-electronics
-
drag
.custom-icon-drag
-
elipsis
.custom-icon-elipsis
-
export
.custom-icon-export
-
explain
.custom-icon-explain
-
edit
.custom-icon-edit
-
eye-close
.custom-icon-eye-close
-
email
.custom-icon-email
-
error
.custom-icon-error
-
favorite
.custom-icon-favorite
-
file-common
.custom-icon-file-common
-
file-delete
.custom-icon-file-delete
-
file-add
.custom-icon-file-add
-
film
.custom-icon-film
-
fabulous
.custom-icon-fabulous
-
file
.custom-icon-file
-
folder-close
.custom-icon-folder-close
-
filter
.custom-icon-filter
-
good
.custom-icon-good
-
hide
.custom-icon-hide
-
home
.custom-icon-home
-
history
.custom-icon-history
-
file-open
.custom-icon-file-open
-
forward
.custom-icon-forward
-
import
.custom-icon-import
-
image-text
.custom-icon-image-text
-
keyboard-26
.custom-icon-keyboard-26
-
keyboard-9
.custom-icon-keyboard-9
-
link
.custom-icon-link
-
layout
.custom-icon-layout
-
fullscreen-shrink
.custom-icon-fullscreen-shrink
-
layers
.custom-icon-layers
-
lock
.custom-icon-lock
-
fullscreen-expand
.custom-icon-fullscreen-expand
-
map
.custom-icon-map
-
meh
.custom-icon-meh
-
menu
.custom-icon-menu
-
loading
.custom-icon-loading
-
help
.custom-icon-help
-
minus-circle
.custom-icon-minus-circle
-
modular
.custom-icon-modular
-
notification
.custom-icon-notification
-
mic
.custom-icon-mic
-
more
.custom-icon-more
-
pad
.custom-icon-pad
-
operation
.custom-icon-operation
-
play
.custom-icon-play
-
print
.custom-icon-print
-
mobile-phone
.custom-icon-mobile-phone
-
minus
.custom-icon-minus
-
navigation
.custom-icon-navigation
-
pdf
.custom-icon-pdf
-
prompt
.custom-icon-prompt
-
move
.custom-icon-move
-
refresh
.custom-icon-refresh
-
run-up
.custom-icon-run-up
-
picture
.custom-icon-picture
-
run-in
.custom-icon-run-in
-
pin
.custom-icon-pin
-
save
.custom-icon-save
-
search
.custom-icon-search
-
share
.custom-icon-share
-
scanning
.custom-icon-scanning
-
security
.custom-icon-security
-
sign-out
.custom-icon-sign-out
-
select
.custom-icon-select
-
stop
.custom-icon-stop
-
success
.custom-icon-success
-
smile
.custom-icon-smile
-
switch
.custom-icon-switch
-
setting
.custom-icon-setting
-
survey
.custom-icon-survey
-
task
.custom-icon-task
-
skip
.custom-icon-skip
-
text
.custom-icon-text
-
time
.custom-icon-time
-
telephone-out
.custom-icon-telephone-out
-
toggle-left
.custom-icon-toggle-left
-
toggle-right
.custom-icon-toggle-right
-
telephone
.custom-icon-telephone
-
top
.custom-icon-top
-
unlock
.custom-icon-unlock
-
user
.custom-icon-user
-
upload
.custom-icon-upload
-
work
.custom-icon-work
-
training
.custom-icon-training
-
warning
.custom-icon-warning
-
zoom-in
.custom-icon-zoom-in
-
zoom-out
.custom-icon-zoom-out
-
add-bold
.custom-icon-add-bold
-
arrow-left-bold
.custom-icon-arrow-left-bold
-
arrow-up-bold
.custom-icon-arrow-up-bold
-
close-bold
.custom-icon-close-bold
-
arrow-down-bold
.custom-icon-arrow-down-bold
-
minus-bold
.custom-icon-minus-bold
-
arrow-right-bold
.custom-icon-arrow-right-bold
-
select-bold
.custom-icon-select-bold
-
arrow-up-filling
.custom-icon-arrow-up-filling
-
arrow-down-filling
.custom-icon-arrow-down-filling
-
arrow-left-filling
.custom-icon-arrow-left-filling
-
arrow-right-filling
.custom-icon-arrow-right-filling
-
caps-unlock-filling
.custom-icon-caps-unlock-filling
-
comment-filling
.custom-icon-comment-filling
-
check-item-filling
.custom-icon-check-item-filling
-
clock-filling
.custom-icon-clock-filling
-
delete-filling
.custom-icon-delete-filling
-
decline-filling
.custom-icon-decline-filling
-
dynamic-filling
.custom-icon-dynamic-filling
-
intermediate-filling
.custom-icon-intermediate-filling
-
favorite-filling
.custom-icon-favorite-filling
-
layout-filling
.custom-icon-layout-filling
-
help-filling
.custom-icon-help-filling
-
history-filling
.custom-icon-history-filling
-
filter-filling
.custom-icon-filter-filling
-
file-common-filling
.custom-icon-file-common-filling
-
news-filling
.custom-icon-news-filling
-
edit-filling
.custom-icon-edit-filling
-
fullscreen-expand-filling
.custom-icon-fullscreen-expand-filling
-
smile-filling
.custom-icon-smile-filling
-
rise-filling
.custom-icon-rise-filling
-
picture-filling
.custom-icon-picture-filling
-
notification-filling
.custom-icon-notification-filling
-
user-filling
.custom-icon-user-filling
-
setting-filling
.custom-icon-setting-filling
-
switch-filling
.custom-icon-switch-filling
-
work-filling
.custom-icon-work-filling
-
task-filling
.custom-icon-task-filling
-
success-filling
.custom-icon-success-filling
-
warning-filling
.custom-icon-warning-filling
-
folder-filling
.custom-icon-folder-filling
-
map-filling
.custom-icon-map-filling
-
prompt-filling
.custom-icon-prompt-filling
-
meh-filling
.custom-icon-meh-filling
-
cry-filling
.custom-icon-cry-filling
-
top-filling
.custom-icon-top-filling
-
home-filling
.custom-icon-home-filling
-
sorting
.custom-icon-sorting
-
闪电
.custom-icon-thunderbolt-fill
-
银行卡
.custom-icon-yinhangqia
-
银行卡
.custom-icon-weibiaoti-
-
提现
.custom-icon-tixian
-
提现
.custom-icon-tixian1
-
银行卡
.custom-icon-yinhangqia1
-
喇叭 (1)
.custom-icon-laba
-
喇叭
.custom-icon-laba1
-
喇叭
.custom-icon-laba2
-
看板
.custom-icon-kanban
-
点
.custom-icon-dian
-
箭头
.custom-icon-tuxing
-
统计
.custom-icon-tongji
-
统计报告
.custom-icon-tongjibaogao
-
免费报价
.custom-icon-mianfeibaojia
-
审批
.custom-icon-shengpi
-
采购
.custom-icon-icon-cart
-
业务
.custom-icon-yewu
-
业务
.custom-icon-yewu-tianchong
-
商品
.custom-icon-shangpin
-
客户
.custom-icon-kehu
-
商品
.custom-icon-shangpin1
-
客户
.custom-icon-kehu1
-
报价
.custom-icon-fl-baojia
-
报价单
.custom-icon-web-icon-
font-class 引用
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
- 兼容性良好,支持 IE8+,及所有现代浏览器。
- 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="custom-icon custom-icon-xxx"></span>
"
custom-icon" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。