其他分享
首页 > 其他分享> > 在vue项目中使用第三方的字体图标库

在vue项目中使用第三方的字体图标库

作者:互联网

如何在vue项目中使用第三方的字体图标库

以在vue项目中导入阿里字体图标库为例

1、打开阿里字体图标库的官方网址
https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

请添加图片描述
2、选择自己需要的字体图标,下面做演示
请添加图片描述

3、选择自己需要的字体图标
请添加图片描述

4、加入购物车
请添加图片描述
5、查看自己加入购物车的图标请添加图片描述
6、添加到项目
请添加图片描述
7、创建到项目
请添加图片描述
8、添加到自己的项目中
请添加图片描述

9、下载到本地
请添加图片描述

10、保存到本地
请添加图片描述
11、解压压缩包
在这里插入图片描述
12、将解压过的文件夹复制到自己所需要的文件夹中,这里复制到我的项目中,不同的项目自行选择
请添加图片描述
13、先在项目的入口文件 main.js 中导入字体图标库
请添加图片描述
14、查看所需要的类名
请添加图片描述
15、把icon图标引入到项目中
请添加图片描述
16、在需要引用字体图标的组件中引用字体图标
请添加图片描述
17、效果
请添加图片描述

标签:复制到,vue,项目,图标库,字体,图标
来源: https://blog.csdn.net/liuhuili_111/article/details/121569145