UNI-APP引入iconfont的方法

在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。

先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去，

选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码

在app.vue中引入CSS文件

使用的时候也很简单

 

可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总感觉不保险，所以还要是本地的比较合人胃口

iconfont文件里面包含 iconfont.ttf、iconfont.css， 将 iconfont.ttf文件转位 base64。
推荐转换工具地址：https://www.giftofspeed.com/base64-encoder/

然后打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置，并且设置 代码如下：

@font-face { font-family: "iconfont";
 src: url(data:font/truetype;
charset=utf-8;
base64,转换的base64内容) format('truetype'); } .iconfont { display: inline-block; }

最后则再项目中App.vue中引入iconfont.css文件

<style> @import "./font/iconfont.css"; </style>

在任意组件中使用方法：

<view class="iconfont icon-XXX"></view>