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;

}

相关推荐
糕冷小美n5 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥5 小时前
Technical Report 2024
java·服务器·前端
沐墨染5 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion5 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks5 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼6 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴6 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
Zhencode6 小时前
Vue3响应式原理之ref篇
vue.js
小疙瘩7 小时前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
Aliex_git7 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习