微信小程序引入下载至本地的iconfont图标

在写小程序项目中遇到icon图标引入不起作用，原因是因为小程序必须先转为base64引入！

第一步

选好自己要用的icon图标并下载至本地

下载后得到这样目录的文件

第二步 转换成base64
网址：https://transfonter.org/

选择后缀为.ttf的文件

第三步：下载成功后，得到一个名为 “transfonter.org” 开头的压缩包，解压后得到三个文件，打开其中 “stylesheet.css” 文件

第四步：在小程序目录新建放置图标资源的文件

这是我自己的一个目录，可以看到在iconfont.wxss中，如果是直接复制文件的话，记得把后缀css改成wxss

把@font-face中的内容换成stylesheet.css的内容

还需要在wxss中添加这段代码：

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'iconfont' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: inherit;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

之后找到下载的本地icon图标文件夹里的iconfont.css文件，将里边的图标代码复制到wxss中，添加完之后整体代码如下：

第五步 在app.wxss中引入，就可以全局使用了。

最后测试显示效果：