在vue中使用iconfont字体图标

于 2021-12-16 17:35:38 发布
阅读量987 收藏 4
点赞数 1
分类专栏： Vue 文章标签： vue.js css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45601874/article/details/121979118
版权
本文介绍了如何在Vue项目中集成并使用iconfont字体图标。步骤包括：访问阿里巴巴矢量图官网创建项目并选择图标，下载到本地，将iconfont.css文件引入项目，并修改相关文件路径，最后在页面中通过复制的图标代码进行使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在Vue中使用iconfont字体图标

1.进入阿里巴巴矢量图官网
在这里插入图片描述
2.注册一个账号并在我的项目里创建一个项目
在这里插入图片描述
3.把需要用到的图标加入购物车
在这里插入图片描述
4.点击购物车添加图标至项目
在这里插入图片描述
5.在我的项目里下载至本地
在这里插入图片描述
6.解压后得到的文件
在这里插入图片描述
7.把iconfont.css放入Vue项目中
在这里插入图片描述
8.在assets里新建一个font文件夹，然后在之前下载好的文件里找到下面的文件放进去
在这里插入图片描述
9.在iconfont.css中修改这3个文件的路径
在这里插入图片描述

10.在main.js中引入字体样式文件
在这里插入图片描述
11.在图标库中复制图标代码，然后在页面中使用
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vermouth-1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值