mui增加icon彩色图标

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/82624517

下载阿里巴巴矢量图标操作见上一篇文章哦

https://blog.csdn.net/ChibiMarukoChan/article/details/82588849

第一步：引入iconfont.js

<script src="js/iconfont.js"></script>

第二步：在页面修改icon的样式，如下：

<style>
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>

第三步：在需要图标的地方引入图标字体：

（1）非彩色图标的写法

  <span class="mui-icon mui-icon-weixin"></span>

（2）彩色图标的写法

<span class="mui-icon">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixin"></use>
    </svg>
</span>
<span class="mui-icon">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-QQ"></use>
    </svg>
</span>

效果图如下：