您好,登录后才能下订单哦!
本篇文章给大家分享的是有关怎么在vue项目中引入Iconfont图标库,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
1. 在阿里图标库中选中你想要的图标库,并点击进去,
2. 注意: 我们在选择图标是后,如果是需要多个图标就将选中的图标加入购物车,但是如果我们没有在这一个图标库中找到自己需要的图标时,可以去其他的图标库中进行选择,但是要记住离开这个图标库的时候,记得将选择的图标加入自己创建的项目中,
不然去其他图标库的时候,图标库中会被清空,除非你从新进入这一个图标库中,
3. 选择完成后,点击右上角选择购物车,
4. 进入购物车页面,然后点击提交至项目中,因为我们是新建的项目,所以要先在图标库中新建项目后,才能将以选中图标加入项目中,进行保存,
5. 点击添加后,进入我的项目这个页面,会显示自己已经选择的图标,在点击下载到本地前,要注意配置一下图表选项,
6. 点击编辑选项;
7. 配置图标使用前缀,然后点击保存,就可以下载到本地了,
8. 点击下载到本地,并将下载的文件放入所开发的项目中去,
9. 将下载好的文件放入项目中去,首先在src下的assets项目新建一个文件夹,名字自己定义,注意要明了,建下载的文件放进去就好的,然后就可以修改iconfont.css文件,修改完,才能进行显示,
[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; }
上面是要替换的css内容,
10. 在main.js引入iconfont.css文件,也就是刚刚我们修改的文件,这样就不用每一个组件想用图标的时候都要引一遍了,
11. 在组件中使用新下载的图标,
以上就是怎么在vue项目中引入Iconfont图标库,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。