IconFont 图标
-
cat#icon-black-cat
-
cat-in-white-silhoue#icon-white-cat
-
markdown#icon-markdown
-
uniE6A3#icon-right
-
uniE6A0#icon-caidan
-
uniE6B4#icon-delete
-
uniE6BC#icon-message
-
uniE6BF#icon-link
-
uniE6C4#icon-weibo
-
uniE6E5#icon-info
-
uniE6EB#icon-forward
-
uniE6F3#icon-share
-
uniE6DE#icon-fold
-
uniE64B#icon-favorfill
-
uniE65F#icon-time
-
uniE64C#icon-favor
-
uniE66F#icon-weixin
-
uniE66C#icon-github
-
uniE66B#icon-notification
-
uniE68C#icon-tags
-
uniE69F#icon-pulldown
-
uniE65C#icon-search
-
uniE71F#icon-pullleft
-
uniE70A#icon-notice
-
uniE73D#icon-attention
-
uniE75C#icon-rounddown
-
uniE75D#icon-upload
-
uniE607#icon-douban
-
uniE604#icon-QQ
-
uniE628#icon-caidan1
-
uniE6E3#icon-appreciatefill
-
uniE644#icon-appreciate
-
uniE646#icon-close
-
uniE74A#icon-calendar
-
uniE651#icon-location
-
uniE645#icon-check
-
uniE657#icon-roundcheck
-
uniE665#icon-camera
-
uniE668#icon-likefill
-
uniE663#icon-warn
-
uniE667#icon-comment
-
uniE669#icon-like
-
uniE679#icon-back
-
uniE686#icon-my1
-
uniE684#icon-more
-
uniE691#icon-question
-
uniE720#icon-pullright
-
uniE708#icon-countdown
-
uniE731#icon-mark
-
uniE661#icon-unfold
-
uniE739#icon-file
-
uniE78B#icon-my
-
uniE761#icon-write
-
uniE741#icon-community
-
uniE758#icon-hot
-
uniE791#icon-text
-
uniE769#icon-menu
-
bing#icon-bing
-
sakura-black#icon-sakura
-
pixiv-gray#icon-pixiv
-
gear#icon-gear
-
dots#icon-dots
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>