前言

Iconfont阿里巴巴矢量图标库是我非常喜欢的一个网站。它可以在线下载/编辑/上传我需要的矢量图标，还支持团队合作。那么如何将其引入mpvue项目呢？

图标字体阿里巴巴矢量图标库

向购物车添加图标

搜索关键字可以是中文或英文

下载材料

点击网站右上角的购物车图标，这里我们选择第三个

Ps:添加到项目中非常有用。您可以在线编辑您最喜欢的图标大小样式/重命名/邀请成员。在这里，我们选择加入项目并下载代码

文件解压缩

为了兼容，我们会把css/ttf/svg/woff/eot文件留在一般的网页中，而小程序有自己的规则。这里我们留下css和ttf文件。请继续阅读如何处理它们

方法一。本地介绍

因为小程序不支持处理ttf/woff/eot等文件，~ ~我们必须把子图像文件转换成base64格式再导入。~ ~直接使用源文件会提示有几个字体文件没有上传，导致字体打包上传后无法显示。删除引入eot/ttf/svg的行，并在base64行之前添加src。

Ttf到base64(下载的文件base64(iconfont已被base64转码，因此跳过此步骤)

变压器

将iconfont.css的介绍部分替换为样式表. css的内容(同上)

替换结果：

方法2，cdn介绍

根据项目要求，可以选择cdn引入字体图标。优点：本地文件小；缺点：网络不好的时候，图标可能会暂时从页面上消失。在我的项目中，单击查看在线链接并复制代码：

将iconfont.css的@font-face部分替换为之前复制的带有alicdn的代码。

介绍css

App.vue风格开头介绍：

@ import./static/iconfont。如果css处于静态，则添加.否则它将报告字符图标的错误使用

图标字体图标-方大井/注意事项

1.如果一次下载多个图标，只需要一个ttf文件。同样，如果有新的或修改过的图标文件，所有这些文件都需要下载一次，然后转换为base64。2.强烈建议创建一个新的项目来保存你的字体文件，可以永久记录和编辑(缩放和旋转)，项目应该存储在网站顶部-图标管理-我的项目。3.使用css预处理，和scss的一般过程一样，就是把iconfont.css改成你的css预处理文件格式，引入4。欢迎有问题或流程不清晰的反馈~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。