IconFont 图标
-
更多#icon-gengduo
-
成功#icon-chenggong
-
失败#icon-shibai
-
警示#icon-jingshi
-
提示#icon-tishi
-
帮助#icon-bangzhu
-
等待#icon-dengdai
-
地图#icon-ditu
-
编号#icon-bianhao
-
照明#icon-zhaoming
-
icon_26#icon-icon26
-
上一页#icon-shangyiye-copy
-
群组#icon-qunzu
-
1#icon-1
-
2#icon-2
-
3#icon-3
-
4#icon-4
-
5#icon-5
-
6#icon-6
-
7#icon-7
-
10#icon-10
-
14#icon-14
-
11#icon-11
-
13#icon-13
-
12#icon-12
-
8#icon-8
-
9#icon-9
-
15#icon-15
-
16#icon-16
-
17#icon-17
-
18#icon-18
-
19#icon-19
-
20#icon-20
-
21#icon-21
-
29#icon-29
-
34#icon-34
-
28#icon-28
-
25#icon-25
-
22#icon-22
-
27#icon-27
-
26#icon-26
-
30#icon-30
-
35#icon-35
-
36#icon-36
-
38#icon-38
-
41#icon-41
-
33#icon-33
-
39#icon-39
-
40#icon-40
-
32#icon-32
-
31#icon-31
-
24#icon-24
-
23#icon-23
-
37#icon-37
-
44#icon-44
-
42#icon-42
-
47#icon-47
-
43#icon-43
-
48#icon-48
-
51#icon-51
-
54#icon-54
-
45#icon-45
-
57#icon-57
-
52#icon-52
-
49#icon-49
-
50#icon-50
-
53#icon-53
-
58#icon-58
-
55#icon-55
-
46#icon-46
-
60#icon-60
-
61#icon-61
-
56#icon-56
-
59#icon-59
-
63#icon-63
-
65#icon-65
-
62#icon-62
-
70#icon-70
-
66#icon-66
-
76#icon-76
-
67#icon-67
-
64#icon-64
-
77#icon-77
-
68#icon-68
-
69#icon-69
-
73#icon-73
-
74#icon-74
-
75#icon-75
-
79#icon-79
-
78#icon-78
-
71#icon-71
-
80#icon-80
-
72#icon-72
-
81#icon-81
-
86#icon-86
-
88#icon-88
-
89#icon-89
-
82#icon-82
-
84#icon-84
-
85#icon-85
-
87#icon-87
-
83#icon-83
-
90#icon-90
-
91#icon-91
-
92#icon-92
-
93#icon-93
-
95#icon-95
-
94#icon-94
-
96#icon-96
-
97#icon-97
-
98#icon-98
-
99#icon-99
-
100#icon-100
-
101#icon-101
-
102#icon-102
-
103#icon-103
-
104#icon-104
-
105#icon-105
-
106#icon-106
-
107#icon-107
-
108#icon-108
-
109#icon-109
-
110#icon-110
-
111#icon-111
-
112#icon-112
-
113#icon-113
-
114#icon-114
-
115#icon-115
-
116#icon-116
-
117#icon-117
-
118#icon-118
-
119#icon-119
-
122#icon-122
-
131#icon-131
-
124#icon-124
-
126#icon-126
-
129#icon-129
-
130#icon-130
-
127#icon-127
-
125#icon-125
-
120#icon-120
-
128#icon-128
-
123#icon-123
-
121#icon-121
-
143#icon-143
-
150#icon-150
-
153#icon-153
-
154#icon-154
-
warning3#icon-warning3
-
close2#icon-close2
-
download#icon-download
-
money#icon-money
-
help2#icon-help2
-
safe1#icon-safe1
-
safe2#icon-safe2
-
error#icon-error
-
search#icon-search
-
close1#icon-close1
-
tick#icon-tick
-
password#icon-password
-
refresh#icon-refresh
-
user#icon-user
-
loading#icon-loading
-
tick2#icon-tick2
-
eye#icon-eye
-
saoma#icon-saoma
-
light#icon-light
-
bike#icon-bike
-
arr_down#icon-arrdown
-
position#icon-position
-
phone#icon-phone
-
tel#icon-tel
-
pos#icon-pos
-
circle#icon-circle
-
closeicon#icon-closeicon
-
littletick#icon-littletick
-
download#icon-download1
-
rank#icon-rank
-
android#icon-android
-
apple#icon-apple
-
162#icon-162
-
160#icon-160
-
161#icon-161
-
163#icon-163
-
chongzhi#icon-chongzhi
-
tixian#icon-tixian
-
zhangdan#icon-zhangdan
-
zhichu#icon-zhichu
-
shouru#icon-shouru
-
gift#icon-gift
-
解除绑定#icon-jiechubangding
-
d#icon-d
-
a#icon-a
-
c#icon-c
-
e#icon-e
-
b#icon-b
-
tick#icon-tick1
-
flower#icon-flower
-
zan#icon-zan
-
照明#icon-zhaoming1
-
提示#icon-tishi1
-
提示#icon-tishi2
-
我来爆料#icon-wolaibaoliao
-
每日一题#icon-meiriyiti
-
位置#icon-weizhi
-
heart#icon-heart
-
苏州环卫#icon-suzhouhuanwei
-
处置概况#icon-chuzhigaikuang
-
工作动态#icon-gongzuodongtai
-
绿色家园#icon-lvsejiayuan
-
年度收集#icon-niandushouji
-
环卫大数据#icon-huanweidashuju
-
问卷调查#icon-wenjuantiaocha
-
宣传资料#icon-xuanchuanziliao
-
新闻资讯#icon-xinwenzixun
-
作业考核#icon-zuoyekaohe
-
pdf#icon-pdf
-
搜索#icon-sousuo
-
锦旗#icon-jinqi
-
失败#icon-shibai1
-
账单#icon-zhangdan1
-
周边#icon-zhoubian
-
优秀#icon-youxiu
-
内部应用#icon-neibuyingyong
-
异常#icon-yichang
-
到这去#icon-daozhequ
-
渣土#icon-zhatu
-
垃圾#icon-laji
-
扫码#icon-saoma1
-
积分#icon-jifen
-
扫码#icon-saoma11
-
问题上报#icon-wentishangbao
-
办理指南#icon-banlizhinan
-
渣土宣传#icon-zhatuxuanchuan
-
预约办理#icon-yuyuebanli
-
办理进度查询#icon-banlijinduchaxun
-
icon 2#icon-icon
-
专题#icon-zhuanti
-
锦旗#icon-jinqi1
-
账单#icon-zhangdan2
-
实时数据发布#icon-shishishujufabu
-
关闭#icon-guanbi
-
问题#icon-wenti
-
说明#icon-shuoming
-
sun#icon-sun
-
工单量#icon-gongdanliang
-
案卷数量#icon-anjuanshuliang
-
红包#icon-hongbao
-
满意指数#icon-manyizhishu
-
在线人数#icon-zaixianrenshu
-
flag2#icon-flag
-
手势#icon-shoushi
-
屏蔽信息#icon-pingbixinxi
-
急速上报#icon-jisushangbao
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>