1.使用线上的阿里iconfont图标库

1.打开iconFont官网，选择自己喜欢的图标，添加购物车

2.点击购物车并将其添加到项目中

3生成链接

4在我们的vue项目中，找到index.html文件，介绍css样式，并记住将您的链接地址放在这里

接下来，我们可以在任何组件中使用我们的图标，这里我将使用上面生成的三个图标之一。

2但是考虑网络及用户体验 阿里iconfont下载本地使用

1阿里图标图标直接下载到本地

2在资产文件下创建iconfont文件夹

把这些文件放在文件夹里

3更改iconfont中的路径。CSS文件

4在main.js中引入iconfont.css文件

5直接使用

3使用vue-awesome

1.首先安装vue-awesome依赖包

npm安装vue-棒极了

2.在main.js文件下

在github上可以清楚地看到，如果考虑项目大小，只导入用于减小包大小的图标。

导入“vue-awesome/图标/标志”

或者不管大小

直接使用

图标名称='啤酒'/图标

摘要

以上就是边肖介绍的Vue中使用图标字体图标的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！