欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue项目中引进iconfont图标

程序员文章站 2024-02-15 08:55:16
...

iconfont地址: https://www.iconfont.cn/。
1:注册账号
2:创建项目
3:上传图标到项目
4:生产代码链接
vue项目中引进iconfont图标
5:配置到项目中使用
在styles目录下创建icon.less,将对应的图标样式代码复制过来
没有就在src创建styles文件夹

  1. 在index.lees(全局样式)中引用图标样式
    // 全局样式文件

    // 加载图标样式图标
    @import './icon.less';
    

    1.2 然后在mian.js引入全局样式

  2. 在App.vue中使用字体图标

    < i class=“toutiao toutiao-lishi”>

  3. 将资料中的素材图片复制到自己项目的assets文件夹中,并将favicon.ico剪切到public目录下,替换默认的ico

一种方式是将 SVG 图标 包装为 Vue 组件来使用。

一种方式是将 SVG 制作为字体图标来使用
这样就能使用了