element-ui中怎样使用iconfont的图标

1 登录

https://www.iconfont.cn/

2 搜索合适的图

element-ui中怎样使用iconfont的图标_第1张图片
element-ui中怎样使用iconfont的图标_第2张图片这里可以找到这个图所在的图库。这样就可以一次查找到对应的所有同款图标

3 选择同款加入购物车

element-ui中怎样使用iconfont的图标_第3张图片

4 将购物车的icon加入项目,注意是新建项目,除非你是确定需要前面已经加过的icon

element-ui中怎样使用iconfont的图标_第4张图片element-ui中怎样使用iconfont的图标_第5张图片

5 下载icon

element-ui中怎样使用iconfont的图标_第6张图片选择font-class 点击下载。其他方式还没用过…

6 导入vscode的vue项目

element-ui中怎样使用iconfont的图标_第7张图片element-ui中怎样使用iconfont的图标_第8张图片
我是简单粗暴都copy过去了,只copy css文件似乎有点问题

element-ui中怎样使用iconfont的图标_第9张图片copy文件 加 配置main.js 配置引入部分就结束了

7 使用

在这里插入图片描述此处是配合elment-ui使用,其他方式应该都是类似的

谢谢浏览,欢迎指正!

你可能感兴趣的:(前端,vue,elementui,iconfont,vscode,前端)