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;

}

相关推荐
ZC跨境爬虫5 分钟前
跟着 MDN 学 HTML day_17:媒体与 Web Audio API 自动播放指南——策略、检测与最佳实践
前端·笔记·ui·html·音视频·媒体
canonical_entropy11 分钟前
Nop Chaos Flux:百度AMIS之后的下一代低代码渲染引擎
前端·低代码·ai编程
时光足迹29 分钟前
Tiptap 简单编辑器模版
前端·javascript·react.js
JSLove43 分钟前
nginx入门
前端·nginx
时光足迹44 分钟前
ThreeJS之GUI控制器
前端·javascript·three.js
时光足迹1 小时前
Tiptap编辑器
前端·javascript·react.js
时光足迹1 小时前
电子书阅读器之笔记高亮(跨段处理)
前端·javascript·react.js
Dabei1 小时前
Android 副屏(Virtual Display)创建与悬浮窗画中画显示实战
前端·架构
RONIN1 小时前
mock模拟后端,生成伪数据接口
vue.js