iconfont-阿里巴巴图标库官网,搜索想要的图标
1、加入购物车
2、添加至项目
头部的资源管理,点我的项目
找到对应的项目,点击 下载至本地,是个zip压缩包
解压缩一下,copy一下文件,放到项目里,比如我存放的路径是 static/iconfont
1、App.vue项目里,在style里 引入对应的路径
@import "static/iconfont/iconfont.css";
它如果报这个错误,是因为路径问题,按照下面方法修改下路径就可以
2、在iconfont.css中,修改成对应的路径,就可以了
src: url('~@/static/iconfont/iconfont.ttf?t=1724122253257') format('woff2'),
url('~@/static/iconfont/iconfont.woff?t=1724122253257') format('woff'),
url('~@/static/iconfont/iconfont.ttf?t=1724122253257') format('truetype');
// 要改成~@,不然打包成H5的话,icon图片不显示
使用的写法:
前面拼上iconfont就行,后面的这个名字,就是iconfont.css中 content=\e655对应一致的
<text class="iconfont icon-fenxiang"></text>
使用效果如图:
如果需要别的图标,可以按照步骤,添加购物车,加入项目,下载安装包,然后整体替换掉对应的iconfont内部文件就行