vue中使用iconfont图标

1. 选择一个图标加入购物车

2、点击右上角购物车图标。点击下载代码,并添加至项目。

3、将下载好的代码文件放入项目中的assets目录的styles下

iconfont.css直接放在styles下

在styles目录下新建目录iconfont,将iconfont.ttf、iconfont.woff、iconfont.woff2放在里面

4、到iconfont.css文件中修改路径 (修改成下面这样)

5、到main.js中引入iconfont.css文件

6、引用的图标一定要有class="iconfont" 不然的话不显示!!!

附加一个在伪类中使用

::v-deep .el-icon-arrow-right:before {

font-family: iconfont; // 一定要这样写 不然不显示

content: "\e603"; // 把"e"前面的替换成"\"

font-size: 20px;

}

相关推荐
IT_陈寒2 小时前
Redis内存暴涨,没想到是AOF重写捣的鬼
前端·人工智能·后端
ikoala2 小时前
让 Codex 自己查账:一个省 token 的小技巧
前端·后端·ai编程
ikoala2 小时前
AI 写页面像说明书,修 Bug 像贴膏药?把这两句话写进 AGENTS.md
前端·javascript·ai编程
去伪存真4 小时前
AI Agent Harness 深度测评与技术选型实战
前端·agent
FRing037 小时前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
疯华整猫10 小时前
被杀掉之后:我把 Android 的「唤起 + 常驻」重做了一遍
前端·面试·架构
ruanno_top10 小时前
点全选,已选的被清空了:Transfer 三态复选框的三个 bug
vue.js
时间的情敌11 小时前
Cesium 加载 3D Tiles 倾斜摄影、压平、样式设置(Vue3 实战)
vue.js·3d·cesium
IT_陈寒12 小时前
Java开发实战:从入门到精通
前端·人工智能·后端
风骏时光牛马12 小时前
生成一个AI转岗经历标题,只需要一个标题,不需要其他的任何文本。
前端