IconFont 图标
-
uniE6A2#icon-uniEA
-
uniE6A3#icon-uniEA1
-
uniE6A5#icon-uniEA2
-
uniE6A7#icon-uniEA3
-
uniE6A8#icon-uniEA4
-
uniE6A6#icon-uniEA5
-
uniE6A9#icon-uniEA6
-
uniE6AA#icon-uniEAA
-
uniE6AB#icon-uniEAB
-
uniE6AC#icon-uniEAC
-
uniE6AD#icon-uniEAD
-
uniE6AE#icon-uniEAE
-
uniE6AF#icon-uniEAF
-
uniE6B0#icon-uniEB
-
uniE6B1#icon-uniEB1
-
uniE6B4#icon-uniEB2
-
uniE6B3#icon-uniEB3
-
uniE6B2#icon-uniEB4
-
uniE6B5#icon-uniEB5
-
uniE6B7#icon-uniEB6
-
uniE6B6#icon-uniEB7
-
uniE6B8#icon-uniEB8
-
uniE6BA#icon-uniEBA
-
uniE6B9#icon-uniEB9
-
uniE6BB#icon-uniEBB
-
uniE6BE#icon-uniEBE
-
uniE6BD#icon-uniEBD
-
uniE6BC#icon-uniEBC
-
uniE6BF#icon-uniEBF
-
uniE6C0#icon-uniEC
-
uniE6C1#icon-uniEC1
-
uniE6C2#icon-uniEC2
-
uniE6C3#icon-uniEC3
-
uniE6C4#icon-uniEC4
-
uniE6C5#icon-uniEC5
-
uniE6C6#icon-uniEC6
-
uniE6C7#icon-uniEC7
-
uniE6C8#icon-uniEC8
-
uniE6C9#icon-uniEC9
-
uniE6CA#icon-uniECA
-
uniE6CC#icon-uniECC
-
uniE6CE#icon-uniECE
-
uniE6CB#icon-uniECB
-
uniE6CF#icon-uniECF
-
uniE6CD#icon-uniECD
-
uniE6D0#icon-uniED
-
uniE6D1#icon-uniED1
-
uniE6D5#icon-uniED2
-
uniE6D2#icon-uniED3
-
uniE6D3#icon-uniED4
-
uniE6D4#icon-uniED5
-
uniE6D6#icon-uniED6
-
uniE6D7#icon-uniED7
-
uniE6DA#icon-uniEDA
-
uniE6DB#icon-uniEDB
-
uniE6D8#icon-uniED8
-
uniE6D9#icon-uniED9
-
uniE6DC#icon-uniEDC
-
uniE6DD#icon-uniEDD
-
uniE6DE#icon-uniEDE
-
uniE60A#icon-uniEA7
-
uniE60B#icon-uniEB10
-
uniE60D#icon-uniED10
-
uniE60C#icon-uniEC10
-
uniE60E#icon-uniEE
-
uniE60F#icon-uniEF
-
uniE61A#icon-uniEA8
-
uniE61B#icon-uniEB11
-
uniE61D#icon-uniED11
-
uniE61E#icon-uniEE1
-
uniE61C#icon-uniEC11
-
uniE61F#icon-uniEF1
-
uniE62A#icon-uniEA9
-
uniE62C#icon-uniEC12
-
uniE62D#icon-uniED12
-
uniE62B#icon-uniEB12
-
uniE62E#icon-uniEE2
-
uniE63A#icon-uniEA10
-
uniE62F#icon-uniEF2
-
uniE63B#icon-uniEB13
-
uniE63C#icon-uniEC13
-
uniE63D#icon-uniED13
-
uniE63E#icon-uniEE3
-
uniE63F#icon-uniEF3
-
uniE64A#icon-uniEA11
-
uniE64B#icon-uniEB14
-
uniE64C#icon-uniEC14
-
uniE64E#icon-uniEE4
-
uniE64D#icon-uniED14
-
uniE64F#icon-uniEF4
-
uniE65A#icon-uniEA12
-
uniE65E#icon-uniEE5
-
uniE65B#icon-uniEB15
-
uniE65D#icon-uniED15
-
uniE65C#icon-uniEC15
-
uniE66A#icon-uniEA13
-
uniE65F#icon-uniEF5
-
uniE66D#icon-uniED16
-
uniE66B#icon-uniEB16
-
uniE67A#icon-uniEA14
-
uniE66C#icon-uniEC16
-
uniE66E#icon-uniEE6
-
uniE66F#icon-uniEF6
-
uniE67B#icon-uniEB17
-
uniE67C#icon-uniEC17
-
uniE67D#icon-uniED17
-
uniE67E#icon-uniEE7
-
uniE67F#icon-uniEF7
-
uniE68A#icon-uniEA15
-
uniE68B#icon-uniEB18
-
uniE68C#icon-uniEC18
-
uniE68D#icon-uniED18
-
uniE68E#icon-uniEE8
-
uniE68F#icon-uniEF8
-
uniE69B#icon-uniEB19
-
uniE69C#icon-uniEC19
-
uniE69D#icon-uniED19
-
uniE69A#icon-uniEA16
-
uniE69F#icon-uniEF9
-
uniE69E#icon-uniEE9
-
uniE600#icon-uniE
-
uniE601#icon-uniE1
-
uniE602#icon-uniE2
-
uniE603#icon-uniE3
-
uniE607#icon-uniE4
-
uniE605#icon-uniE5
-
uniE604#icon-uniE6
-
uniE606#icon-uniE7
-
uniE609#icon-uniE8
-
uniE608#icon-uniE9
-
uniE610#icon-uniE10
-
uniE611#icon-uniE11
-
uniE612#icon-uniE12
-
uniE615#icon-uniE13
-
uniE613#icon-uniE14
-
uniE614#icon-uniE15
-
uniE616#icon-uniE16
-
uniE617#icon-uniE17
-
uniE618#icon-uniE18
-
uniE619#icon-uniE19
-
uniE620#icon-uniE20
-
uniE621#icon-uniE21
-
uniE622#icon-uniE22
-
uniE623#icon-uniE23
-
uniE624#icon-uniE24
-
uniE625#icon-uniE25
-
uniE626#icon-uniE26
-
uniE627#icon-uniE27
-
uniE628#icon-uniE28
-
uniE629#icon-uniE29
-
uniE630#icon-uniE30
-
uniE631#icon-uniE31
-
uniE632#icon-uniE32
-
uniE633#icon-uniE33
-
uniE634#icon-uniE34
-
uniE635#icon-uniE35
-
uniE637#icon-uniE36
-
uniE636#icon-uniE37
-
uniE638#icon-uniE38
-
uniE639#icon-uniE39
-
uniE640#icon-uniE40
-
uniE641#icon-uniE41
-
uniE643#icon-uniE42
-
uniE642#icon-uniE43
-
uniE646#icon-uniE44
-
uniE645#icon-uniE45
-
uniE644#icon-uniE46
-
uniE647#icon-uniE47
-
uniE648#icon-uniE48
-
uniE652#icon-uniE49
-
uniE649#icon-uniE50
-
uniE650#icon-uniE51
-
uniE653#icon-uniE52
-
uniE651#icon-uniE53
-
uniE656#icon-uniE54
-
uniE658#icon-uniE55
-
uniE654#icon-uniE56
-
uniE655#icon-uniE57
-
uniE657#icon-uniE58
-
uniE659#icon-uniE59
-
uniE662#icon-uniE60
-
uniE660#icon-uniE61
-
uniE663#icon-uniE62
-
uniE664#icon-uniE63
-
uniE661#icon-uniE64
-
uniE665#icon-uniE65
-
uniE667#icon-uniE66
-
uniE668#icon-uniE67
-
uniE666#icon-uniE68
-
uniE669#icon-uniE69
-
uniE670#icon-uniE70
-
uniE671#icon-uniE71
-
uniE672#icon-uniE72
-
uniE674#icon-uniE73
-
uniE673#icon-uniE74
-
uniE675#icon-uniE75
-
uniE676#icon-uniE76
-
uniE677#icon-uniE77
-
uniE678#icon-uniE78
-
uniE679#icon-uniE79
-
uniE681#icon-uniE80
-
uniE683#icon-uniE81
-
uniE680#icon-uniE82
-
uniE682#icon-uniE83
-
uniE684#icon-uniE84
-
uniE686#icon-uniE85
-
uniE685#icon-uniE86
-
uniE687#icon-uniE87
-
uniE688#icon-uniE88
-
uniE689#icon-uniE89
-
uniE691#icon-uniE90
-
uniE690#icon-uniE91
-
uniE695#icon-uniE92
-
uniE693#icon-uniE93
-
uniE692#icon-uniE94
-
uniE696#icon-uniE95
-
uniE694#icon-uniE96
-
uniE697#icon-uniE97
-
notdef#icon-notdef
-
uniE698#icon-uniE98
-
x#icon-x
-
uniE699#icon-uniE99
-
uniE6A1#icon-uniEA17
-
uniE6A0#icon-uniEA18
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>