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;

}

相关推荐
程序媛_MISS_zhang_0110几秒前
APP中列表到详情,详情返回列表时候,返回定位到之前查看详情那条数据
前端·javascript·vue.js
还有多远.几秒前
前端部署后自动检测更新
前端·javascript·vue.js
爱吃无爪鱼2 分钟前
02-前端开发核心概念完全指南
css·vue.js·前端框架·npm·node.js·sass
拾忆,想起3 分钟前
Dubbo本地存根与本地伪装实战指南:提升微服务容错能力的利器
前端·微服务·云原生·架构·dubbo·safari
wuli_滔滔8 分钟前
DevUI弹窗体系重构:微前端场景下的模态管理策略
前端·重构·架构
前端老曹10 分钟前
vue-pdf-embed(Vue3实现pdf本地预览功能)
javascript·vue.js·pdf
Light6011 分钟前
用一个 Vue 中间件统一 UniApp 与 Taro:契约驱动的双栈方案
vue.js·uni-app·uniapp·taro·vue中间件·跨端适配·契约驱动
fruge11 分钟前
Angular 17 新特性深度解析:独立组件 + 信号系统实战
前端·javascript·vue.js
卓码软件测评11 分钟前
第三方软件质量检测机构:【Apifox多格式支持处理JSON、XML、GraphQL等响应类型】
前端·测试工具·正则表达式·测试用例·压力测试