其它前端项目只需要引入iconfont字体图标文件，由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小程序引入iconfont字体图标这个问题了，下面糯麦为大家手把手演示微信小程序如何引入第三方icon字体图标，以引入iconfont图标库为例，希望对大家有一定的帮助。

一、https://www.iconfont.cn/ 下载需要的图标

1：将想要的图标添加入库：

2：进入图标购物车，选择下载代码

3：下载成功的代码解压后，将得到以下文件列表

二、转换 ttf 文件为 base64

推荐去 https://transfonter.org 转换

1：配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：

2：配置选项完成后，点击Add fonts按钮进行ttf文件上传，点击Convert按钮进行转换，转换成功后点击Download进行转换后的源文件下载

3：下载成功后，得到一个名为transfonter.org开头的压缩包，解压后得到三个文件，然后我们打开stylesheet.css文件

三、在小程序中使用

1.新建一个小程序项目，成功后可以自己建一个 resource 文件夹用来放字体图标等资源，并在根目录下新建一个 "iconfont.wxss" 的空白文件，这个wxss就是我们的字体图标文件，先将转化完成后下载下来的stylesheet.css文件中的所有代码全部复制进来

2：再讲最开始从图标库中下载解压的iconfont.css文件打开，复制所有以.icon-开头的伪元素代码至下方

3：添加以下代码到style.wxss中，用于图标引入时进行icon样式匹配过滤，其中font-family必须与顶部引入的@font-face中的font-family一致

[class^="icon-"], [class*=" icon-"] {
  font-family: 'iconfont' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

4：全局引入字体图标，打开项目根目录下的app.wxss文件，引入刚刚创建的iconfont.wxss，就可以在任意页面进行使用

@import '/iconfont.wxss';

5：代码中进行使用

<icon class="icon-28 icon-icon-test3"></icon>

以上就是糯麦为大家总结的如何在微信小程序中引入第三方icon文字图标代码的全部过程，微信小程序中引入第三方自定义字体原理与操作步骤一样，需要说明的是小程序体积限制有限，尽量压缩和引入必要的第三方资源，以免导致体积超过限制而无法运行的问题，希望可以对大家有所帮助