IconFont 图标
-
portrait#icon-portrait
-
calendar#icon-calendar
-
recommend#icon-recommend
-
non-recommend#icon-non-recommend
-
message#icon-message
-
SearchBox#icon-SearchBox
-
option#icon-option
-
sequencing#icon-sequencing
-
none#icon-none
-
pickup#icon-pickup
-
collection#icon-collection
-
clues#icon-clues
-
business#icon-business
-
top#icon-top
-
event#icon-event
-
product#icon-product
-
dropdown#icon-dropdown
-
close#icon-close
-
open#icon-open
-
add#icon-add
-
all/page/add#icon-add2
-
delete#icon-delete
-
share#icon-share-
-
input/delete#icon-delete-
-
input/pickup#icon-pickup2
-
input/dropdown#icon-dropdown-copy
-
readmore#icon-readmore
-
close#icon-close2
-
money#icon-money
-
custom#icon-custom
-
toast/wrong#icon-danger
-
toast/warning#icon-warning
-
toast/right#icon-success
-
popup/check-circle#icon-check
-
check/focus#icon-check_focus
-
select/focus#icon-select_focus
-
non-select#icon-non-select
-
non-check#icon-non-check
-
amplification#icon-amplification
-
narrow#icon-narrow
-
table#icon-table
-
tabulation#icon-tabulation
-
tendency#icon-tendency
-
tree#icon-tree
-
left#icon-left
-
right#icon-right
-
form#icon-form
-
home/clue#icon-clue
-
home/company#icon-company
-
home/graphic#icon-graphic
-
home/business#icon-business1
-
home/event#icon-event1
-
home/product#icon-product1
-
home/performance#icon-performance
-
home/risk#icon-risk
-
home/tips#icon-tips
-
home/dynamic#icon-dynamic
-
home/custom#icon-custom1
-
home/setting#icon-setting
-
local#icon-local
-
scroll/circle/normal#icon-active
-
scroll/circle/red#icon-active1
-
sidebar/viewmore#icon-viewmore
-
change#icon-change
-
hot#icon-hot
-
toast/message#icon-info
-
attention#icon-attention1
-
refresh#icon-refresh
-
equal#icon-equal
-
focused#icon-focused
-
tips/industry#icon-industry
-
remove#icon-remove
-
company#icon-company-
-
left#icon-left1
-
right#icon-right1
-
filtrate#icon-filtrate
-
contacts#icon-contacts
-
marketing#icon-marketing-
-
check_anything#icon-check_anything
-
down#icon-down
-
up#icon-up
-
contacts/add#icon-add1
-
customers/add#icon-add-
-
marketing/add#icon-marketing-1
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="#icon-xxx"></use>
</svg>