IconFont 图标
-
消息#icon-xiaoxi
-
导航背景#icon-daohangbeijing
-
播放#icon-bofang
-
添加#icon-tianjia
-
关闭#icon-guanbi
-
小返回#icon-xiaofanhui
-
加载#icon-jiazai
-
刷新#icon-shuaxin
-
打赏_38x38#icon-dashang_x
-
点赞__38x38#icon-dianzan__x
-
转发__38x38#icon-zhuanfa__x
-
收藏_38x38#icon-shoucang_x
-
评论_38x38#icon-pinglun_x
-
总关闭#icon-zongguanbi
-
好评_38x36#icon-haoping_x
-
团队_38x36#icon-tuandui_x
-
反馈_38x36#icon-fankui_x
-
发表情_42x42#icon-fabiaoqing_x
-
发语音_42x42#icon-fayuyin_x
-
切换键盘_42x42#icon-qiehuanjianpan_x
-
重新录制_24x24#icon-zhongxinluzhi_x
-
删除#icon-shanchu
-
确定#icon-queding
-
导航菜单_44X44#icon-daohangcaidan_X
-
导航消息_44X44#icon-daohangxiaoxi_X
-
导航删除_44X44#icon-daohangshanchu_X
-
导航返回_44X44#icon-daohangfanhui_X
-
导航-更多44x44#icon-daohang-gengduox
-
搜索#icon-sousuo
-
Go#icon-Go
-
礼物#icon-liwu
-
详情#icon-xiangqing
-
发帖_40X40#icon-fatie_X
-
收藏_40X40#icon-shoucang_X
-
回复_40X40#icon-huifu_X
-
聊一聊#icon-liaoyiliao
-
下一题#icon-xiayiti
-
上一题#icon-shangyiti
-
切图_38x38#icon-qietu_x
-
导航公众号_44x44#icon-daohanggongzhonghao_x
-
搜索_删除#icon-sousuo_shanchu-copy
-
进入 30x30px#icon-jinruxpx
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
<script src="./duiabang.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>