mui 添加自定义图标

 

步骤一、 

      1.登录网站(阿里巴巴矢量图图库)  网站：http://www.iconfont.cn/

      2.使用自己的新郎微博登录

     3.选择自己喜欢的图标,点击添加购物车

1. 图标管理---》我的项目 输入项目名字，例如“mui-icon-custom”

 

1. 点击购物车图标，查看当前图标，将图标加入自己的项目

 

     6.选择完毕后,图标管理--->我的项目--->下载至本地

   

     7.解压此文件

步骤二、

    1.找到iconfont.js,放置项目js文件下

          

    2.在HTML中引入引入js以及css文件

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

<link type="text/css" href="css/iconfont.css" rel="stylesheet" />

    3.在HTML中添加通用css代码

      <style type="text/css">
        .icon {

width: 2.5em; 大小可以调节

height: 2.5em; 大小可以调节

 

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

.name {

color: #000000;

font-size: 15px;

font-weight: normal;

margin-top: 3px;

}

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