Vue Element使用icon图标教程详解(第三方)
转载 作者:方丈先生
element-ui自带的图标库不够全,还是需要需要引入第三方icon。下面小编给大家带来了Vue Element使用icon图标教程,感兴趣的朋友一起看看吧
element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下
对于我们来说,首选的当然是阿里icon库教程:
1.打开阿里icon,注册 >登录>图标管理>我的项目
![4a87a4af11bd50b628c557bbef54b4a8.png](https://img-blog.csdnimg.cn/img_convert/4a87a4af11bd50b628c557bbef54b4a8.png)
图标管理>我的项目,点进去
新建项目
![42214d37bd6dbd978c5de6350d4436be.png](https://img-blog.csdnimg.cn/img_convert/42214d37bd6dbd978c5de6350d4436be.png)
新建项目
项目名称随便写。前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了。
设置完,点新建
![0675974454e1e2fbb47054e47475b787.png](https://img-blog.csdnimg.cn/img_convert/0675974454e1e2fbb47054e47475b787.png)
注意前缀。设置完,点新建
现在我们返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一个一个去点,太浪费时间,那么请在控制台输入以下代码,批量导入
1
2
3var
icons = document.querySelectorAll('.icon-gouwuche1');
var
auto_click = function(i) { if
(i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };
auto_click(0);
![33c87b2356f68e2c77365c51f3b33dba.png](https://img-blog.csdnimg.cn/img_convert/33c87b2356f68e2c77365c51f3b33dba.png)
然后点击回车,他会把这套图库所有icon加入购物车
点页面上的购物车
![d019b8d29c945f901fd09cd142ff4fa6.png](https://img-blog.csdnimg.cn/img_convert/d019b8d29c945f901fd09cd142ff4fa6.png)
页面右边的购物车图标,点击
把图标都添加到刚才创建的项目里
![0f58f472d381bd0aae9c3e0b15cd461a.png](https://img-blog.csdnimg.cn/img_convert/0f58f472d381bd0aae9c3e0b15cd461a.png)
添加
设置fontClass,然后下载到本地
![e06c9dfed052642b2706aa3e5e29c003.png](https://img-blog.csdnimg.cn/img_convert/e06c9dfed052642b2706aa3e5e29c003.png)
下载到本地,解压
解压后你会得到这些文件,打开图中圈中的文件
将以下代码加进去,注意: el-icon-third 是你之前设置的icon前缀,第二个 el-icon-third前边有空格的
1
2
3
4
5
6[class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/
{ font-family: "iconfont"
!important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
![dd72f09a05be2a9941f5b4da38284a5c.png](https://img-blog.csdnimg.cn/img_convert/dd72f09a05be2a9941f5b4da38284a5c.png)
绿框的数据保持一致就好
2.上边设置好以后,打开vue项目,我是在src-assets下创建了icon文件夹,将所有的文件复制了过来
在main.js里边把css引进来
![cc03a4b596baae66bd6624686c7bd4f5.png](https://img-blog.csdnimg.cn/img_convert/cc03a4b596baae66bd6624686c7bd4f5.png)
记得引进来
然后重新npm run dev
一下
3.打开在阿里icon的项目,复制你想要的图标代码
![02d6b7b3bfceafe387e56f90853e15b6.png](https://img-blog.csdnimg.cn/img_convert/02d6b7b3bfceafe387e56f90853e15b6.png)
图标代码:el-icon-ump-qianniudaidise
使用,两种引用方式,跟element自带的使用方法一样
![4f8ede605ca3f19b563c1b121164eb4a.png](https://img-blog.csdnimg.cn/img_convert/4f8ede605ca3f19b563c1b121164eb4a.png)
最后效果:
![ba36c8d789225a37f208af394b961202.png](https://img-blog.csdnimg.cn/img_convert/ba36c8d789225a37f208af394b961202.png)
总结
以上所述是小编给大家介绍的Vue Element使用icon图标教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!您可能感兴趣的文章:
- vue element项目引入icon图标的方法
- Vue中使用ElementUI使用第三方图标库iconfont的示例