[JavaScript知识库] 在vue项目中使用第三方的字体图标库

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 在vue项目中使用第三方的字体图标库 -> 正文阅读

[JavaScript知识库]在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、效果