mui-添加自定义图标(彩色)
mui-添加自定义图标(彩色)
效果图展示
未修改:修改后:
1.登录网站(阿里巴巴矢量图图库) 网站:http://www.iconfont.cn/
2.使用自己的新郎微博登录
3.选择自己喜欢的图标,点击添加购物车
4.选择完毕后,图标管理--->我的项目--->下载至本地
5.输入项目名字,例如“mui-icon-custom”,并下载至本地
6.解压此文件
步骤二、
1.找到iconfont.js,放置项目js文件下
2.在HTML中引入引入js文件
<script src="js/iconfont.js"></script>
3.在HTML中添加通用css代码
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4.添加图标代码
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-diannaoguzhang"></use>
</svg>
<div class="name">电脑故障</div>
<div class="fontclass">#icon-diannaoguzhang</div>
注:icon-diannaoguzhang 为图标的代码,点击复制代码即可
5.完成