vue项目中引进iconfont图标
程序员文章站
2024-02-15 08:55:16
...
iconfont地址: https://www.iconfont.cn/。
1:注册账号
2:创建项目
3:上传图标到项目
4:生产代码链接
5:配置到项目中使用
在styles目录下创建icon.less,将对应的图标样式代码复制过来
没有就在src创建styles文件夹
-
在index.lees(全局样式)中引用图标样式
// 全局样式文件// 加载图标样式图标 @import './icon.less';
1.2 然后在mian.js引入全局样式
-
在App.vue中使用字体图标
< i class=“toutiao toutiao-lishi”>
-
将资料中的素材图片复制到自己项目的assets文件夹中,并将favicon.ico剪切到public目录下,替换默认的ico
一种方式是将 SVG 图标 包装为 Vue 组件来使用。
一种方式是将 SVG 制作为字体图标来使用
这样就能使用了