将图标库引入vue项目的教程图

在项目开发过程中，vue项目前端使用的ui框架是element ui，但是element的字体图标库不足以满足日常开发的需要，或者公司项目需要使用公司ui设计的图标，可以参考以下步骤。

1.在阿里图标库中选择想要的图标库，点击即可。

2.注意：选择图标“是”后，如果我们需要多个图标，我们会将选择的图标添加到购物车中。但是，如果我们在这个图标库中找不到我们需要的图标，我们可以去其他图标库进行选择，但是请记住在离开这个图标库时，要将选定的图标添加到我们创建的项目中。

否则，当您转到其他图标库时，图标库将被清空，除非您重新进入此图标库。

3.选择后，点击右上角选择购物车。

4.进入购物车页面，然后单击提交到项目。因为我们是一个新项目，所以在将所选图标添加到项目并保存之前，我们必须在图标库中创建一个新项目。

5.单击“添加”后，进入“我的项目”页面，将显示您选择的图标。在单击下载到本地之前，请注意配置图表选项。

6.单击编辑选项；

7.配置带前缀的图标，然后单击保存在本地下载。

8.单击下载到本地，并将下载的文件放入开发的项目中。

9.将下载的文件放入项目中。首先，在src下的assets项目中创建新文件夹，并自己定义名称。注意要清楚。只要把下载的文件放进去，就可以修改iconfont.css文件了。修改后可以显示。

[class=' El-icon-third']，[class *=' El-icon-third']/*有空格*/{ font-family:'iconfont '！重要；font-size :16 px；font-style : normal；-web kit-font-smooth :抗锯齿；-moz-OSX-font-smooth :灰度；}以上是要替换的css内容。

10.在main.js中导入iconfont.css文件，也就是我们刚刚修改的文件，这样每个组件就不需要使用图标一次了。

11.使用组件中新下载的图标。

摘要

以上是边肖介绍的把Iconfont图标库引入vue项目的教程图，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！