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;

}

相关推荐
SuperEugene几秒前
Vue3 + Element Plus 表格实战:批量操作、行内编辑、跨页选中逻辑统一|表单与表格规范篇
开发语言·前端·javascript
极梦网络无忧24 分钟前
基于 Vite + Vue3 的组件自动注册功能
前端·javascript·vue.js
Predestination王瀞潞37 分钟前
5.4.3 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web) 协议架构(分层)
前端·网络·网络协议·架构·www
爱学习的程序媛1 小时前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
zabr1 小时前
花了 100+ 篇笔记,我整理出 了一套 AI Agent 工程完全指南
前端·后端·agent
软弹1 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
YaHuiLiang1 小时前
Ai Coding浪潮下的前端:“AI在左,裁员在右”
前端
雪碧聊技术1 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建
爱学习的程序媛1 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
han_1 小时前
JavaScript设计模式(二):策略模式实现与应用
前端·javascript·设计模式