IconFont 图标
-
订单#icon-orders
-
订单#icon-order
-
收藏#icon-shoucang
-
基金#icon-jijin
-
按时间检索#icon-anshijianjiansuo
-
编辑#icon-bianji
-
播放#icon-bofang
-
播放分享#icon-bofangfenxiang
-
播放文稿#icon-bofangwengao
-
播放继续#icon-bofangjixu
-
播放下载#icon-bofangxiazai
-
确认#icon-queren
-
播放暂停#icon-bofangzanting
-
底部返回#icon-dibufanhui
-
调整字体#icon-tiaozhengziti
-
点赞#icon-dianzan
-
返回#icon-fanhui
-
个人编辑#icon-gerenbianji
-
宫格模式#icon-gonggemoshi
-
关闭#icon-guanbi
-
含视频#icon-hanshipin
-
关注他#icon-guanzhuta
-
更多#icon-gengduo
-
含文本#icon-hanwenben
-
含音频#icon-hanyinpin
-
加关注#icon-jiaguanzhu
-
后退20秒#icon-houtuimiao
-
列表模式#icon-liebiaomoshi
-
精选推荐#icon-jingxuantuijian
-
立即绑定#icon-lijibangding
-
买买买#icon-maimaimai
-
密码不可见#icon-mimabukejian
-
评分#icon-pingfen
-
评分线框#icon-pingfenxiankuang
-
密码可见#icon-mimakejian
-
其他检索#icon-qitajiansuo
-
前进20秒#icon-qianjinmiao
-
全屏#icon-quanping
-
全部专栏#icon-quanbuzhuanlan
-
热门排行#icon-remenpaihang
-
闪电开户#icon-shandiankaihu
-
上一个#icon-shangyige
-
首页收起#icon-shouyeshouqi
-
收起#icon-shouqi
-
首页展开#icon-shouyezhankai
-
缩小#icon-suoxiao
-
搜索#icon-sousuo
-
通知#icon-tongzhi
-
下一个#icon-xiayige
-
下载#icon-xiazai
-
行情功能收起#icon-hangqinggongnengshouqi
-
选择#icon-xuanze
-
行情功能展开#icon-hangqinggongnengzhankai
-
已点赞#icon-yidianzan
-
已购项目#icon-yigouxiangmu
-
一键打新#icon-yijiandaxin
-
已关注#icon-yiguanzhu
-
输入删除#icon-shurushanchu
-
已阅读#icon-yiyuedu
-
暂停#icon-zanting
-
展开#icon-zhankai
-
资产降序#icon-zichanjiangxu
-
资产升序#icon-zichanshengxu
-
最热#icon-zuire
-
设置#icon-shezhi
-
付费内容#icon-fufeineirong
-
日历#icon-rili
-
货币符号#icon-huobifuhao
-
文章页评论#icon-wenzhangyepinglun
-
文章页返回#icon-wenzhangyefanhui
-
提醒 实心#icon-tixingshixin
-
专题#icon-zhuanti
-
相关文章#icon-xiangguanwenzhang
-
收藏未点#icon-shoucangweidian
-
下一步#icon-xiayibu
-
下一步#icon-xiayibu1
-
返回时间#icon-fanhuishijian
-
禁按铃#icon-jinanling
-
买入#icon-mairu
-
分享#icon-fenxiang1
-
提醒#icon-tixing
-
卖出#icon-maichu
-
加自选#icon-jiazixuan
-
已添加自选#icon-yitianjiazixuan
-
最新视频#icon-zuixinshipin
-
行情功能收起粗#icon-hangqinggongnengshouqicu
-
全部订单#icon-quanbudingdan
-
离线下载#icon-lixianxiazai
-
播放列表#icon-bofangliebiao
-
播放1#icon-bofang1
-
暂停1#icon-zanting1
-
分享#icon-fenxiang2
-
全部订单2#icon-quanbudingdan1
-
调整字体cap lower#icon-tiaozhengziticaplower
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>