首页 > 自考资讯 > 高考百科

Vue项目实战系列文章(三)Iconfont使用 vue中的icon

小条 2024-07-05

Iconfont简介

Iconfont - 国产矢量图标库,功能非常强大,图标内容丰富,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴的经验团队努力创造有用的设计和前端开发工具。

进入iconfont官网

网址:www.iconfont.cn

您可以通过注册并登录来使用github登录

查找图标库- 官方图标库

c45ea6e743fe4028adf80127a70614cf~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720741693&x-signature=KzfcZUvh8uUK6R%2BOyStVny%2B1OfE%3D

将需要的图标放入购物车,进入购物车并加入项目,将项目中的图标下载到本地。

dde665a4793245c5ba0fa1defedc4a13~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720741693&x-signature=1lVSkMm%2Bm4TfBzYEQfK2T5W%2FqAQ%3D

下载到本地,解压缩

4个字体文件:svg、eot、ttf、woff

css是一个样式文件

1ce15914c0f44e12a257f0f860be174b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720741693&x-signature=MmmQMxcvJLgVnblLg5bQbyBijC0%3D

创建目录 src/asserts/stylus/iconfont

将四个字体文件放在iconfong 目录中

将iconfont.css 放在stylus 目录中。

打开iconfont.css并修改url路径

bc9b2d41a8b64f61bf2a5fb7567c67aa~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720741693&x-signature=k2deDvWJxQPpwEtSjX2D9WkmK0A%3D

main.js中引入iconfont.css

导入'./assets/stylus/iconfont.css'

页面使用iconfont图标

要查找您需要使用的图标的十六进制代码,请访问官方网站。

2653c3a324fe470ba83f37b2f6a63a82~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720741693&x-signature=M4o7F9zSIHRTN9SrQI6udj9J7qU%3D ac75feff088a4de99fabfeb564a56f74~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1720741693&x-signature=pB35RykxC56hqRJtaWLtMJl5oyg%3D

版权声明:本文转载于网络,版权归作者所有。如有侵权,请联系本站编辑删除。

猜你喜欢