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.完成