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;

}

相关推荐
小心我捶你啊20 小时前
数据采集和Web解锁不是一回事,从用途到规则区分
前端·爬虫·网络协议
hunterandroid20 小时前
[鸿蒙从零到一] ArkUI 基础组件实战:Text、Image、Button 与 TextInput
前端
fsssb21 小时前
Chromium 源码学习笔记(五):一次点击,在进入 JS 之前先经历了什么?
前端
hunterandroid21 小时前
WorkManager 可靠性实战:唯一任务、重试与幂等设计
android·前端
鹿目21 小时前
使用 Vant CLI 搭建 UI 组件库:从 H5 到小程序跨平台
前端·javascript
默_笙21 小时前
😭 我花了两小时找了一个数据结构 bug,才把"迷你 Cursor"跑起来,绝望(bushi)
前端·javascript
竹林81821 小时前
wagmi v2 监听合约事件踩坑记:从 `useContractEvent` 到 `watchContractEvent`,我重构了三版才搞定实时数据流
前端·javascript
天若有情67321 小时前
纯HTML+Tailwind单页作品集网站——零框架静态前端完整源码
前端·html
WebGirl1 天前
H5唤起app前端实现方案
前端
heimeiyingwang1 天前
【架构实战】SQL注入与XSS防御:常见Web漏洞的系统性修复
前端·sql·架构