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;

}

相关推荐
xzboss9 分钟前
DOM转矢量PDF
前端·javascript
一无所有不好吗9 分钟前
纯前端vue项目实现版本更新(纯代码教程)
前端
萌萌哒草头将军11 分钟前
🏖️ 舒服,原来写代码还可以这么享受😎!沉浸式敲代码神器!
javascript·vue.js·react.js
安全系统学习23 分钟前
内网横向之RDP缓存利用
前端·安全·web安全·网络安全·中间件
Hilaku30 分钟前
为什么我不再相信 Tailwind?三个月重构项目教会我的事
前端·css·前端框架
FogLetter31 分钟前
JavaScript 的历史:从网页点缀到改变世界的编程语言
前端·javascript·http
鹏北海33 分钟前
Vue3+TS的H5项目实现微信分享卡片样式
前端·微信
轻颂呀35 分钟前
进程——环境变量及程序地址空间
前端·chrome
lyc23333338 分钟前
鸿蒙Stage模型:轻量高效的应用架构「舞台革命」🎭
前端
lyc23333338 分钟前
鸿蒙开发必备:应用配置的「黄金法则」📝
前端