iconfont的使用
1.font-class引用
备注：不支持多色
<link rel="stylesheet" type="text/css" href="../../SL%20img/one/iconfont.css">
<!--引入矢量图路劲-->
</head>
<body>
<div>
<i class="iconfont icon-kefu"></i>
<i class="iconfont icon-bofang"></i>
<i class="iconfont icon-shenfenzheng"></i>
<!--这个为引入的矢量图及各个图标的名字路径-->
</div>
</body>
</html>
<!--第一步：在阿里矢量图找到需要的图标 并添加到购物车-->
<!--第二步：下载代码并复制到页面-->
.....
2.symbol引用
备注：
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。
这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
a)支持多色图标了，不再受单色限制。
b)通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
c)兼容性较差，支持 ie9+,及现代浏览器。
d)浏览器渲染svg的性能一般。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读