mui引入阿里iconfont图标

1、先到iconfont.cn注册、登录

2、找到对应的图标&＃xff0c;加入购物车--添加到自己的项目&＃xff08;先起好名字&＃xff09;

3、下载到本地&＃xff0c;解压

4、将iconfont.js iconfont.css放到js、css文件夹&＃xff0c;并在要调用图标的文件中引入&＃xff1b;

定义一下icon的类&＃xff0c;图标大小。

 .icon {
                      width: 1em; height: 1em;
                      vertical-align: -0.15em;
                      fill: currentColor;
                      overflow: hidden;

这个其实在行级元素中是不起作用的&＃xff0c;起作用的还是iconfont.css&＃xff0c;里面可以定义图标的大小、颜色

.icon-bantuanrizhi:before {
  content: "\e64e";

//定义一下图标的颜色

color&＃xff1a;#fff00
}

5、注意&＃xff1a;iconfont图标好像在行级元素中不显示&＃xff0c;所以在行级元素中有时要block一下&＃xff1b;

                
• 
                        

  //完成调用
                           mui-icon iconfont icon-bantuanrizhi">
                               
                            
                          

  信息