微信小程序使用第三方FontIcon库的部分字体图标

网上文章大多数写的都是把整个TTF字库转换为小程序能使用的方法，而字库一般都要上百K字节，比如FontAwesome.ttf有166KB，Ionicons.ttf有112KB，对于小程序2M的限制来说，上百K字节是比较大的开销，程序真正用到的图标也许就几个，没有必要把整个字库都转换过来使用。
所以这篇文章主要介绍怎么只使用部分图标的方法。

一、提取部分图标重新制作TTF字库

---

我没有使用网上大多数文章写的淘宝提供的fonticon，而只使用了Ionicons的几个图标，所以打开Ionicons的官网点击右上角的Designer pack下载压缩包，这个压缩包提供了整个字库的svg矢量文件。
然后打开icomoon网站，点击左上方的Import Icons，导入自己需要的图标的svg文件，可以一次导入多个。
导入后点击右下角Generate Font，进入下一个页面后点击右下角Download下载压缩包。
解压出来的文件中：style.css和fonts/icomoon.ttf有用。

二、转换TTF字库为Base64格式

---

小程序使用FontIcon要先转换为Base64。
打开transfonter网站，点击Add fonts添加上一步制作出来的icomoon.ttf，选择Family support选项和Base64 encode，下面的Formats全都不用选。
点击Convert下载生成的压缩包。
压缩包中stylesheet.css就是Base64格式的字库。

三、小程序调用图标

---

打开小程序项目文件中的app.wxss，把stylesheet.css中
的内容复制到app.wxss的末尾，打开style.css把除@font-face之外的内容也全复制添加到app.wxss的末尾。
内容里两处font-family: 'icomoon';可以任意修改为自己想要的名字，比如我就将其改为font-family: 'io';。

这样在小程序中就可以调用了。例：

四、附整个添加在app.wxss中的内容

这里我只用了3个图标。只是个例子。

@font-face {
  font-family: 'io';
  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'io' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ios-alert:before {
  content: "\e900";
}
.icon-ios-checkmark-circle:before {
  content: "\e901";
}
.icon-ios-close-circle:before {
  content: "\e902";
}

五、跟其他第三方组件比如vant的冲突

---

把上面的icon用到代码中一切正常，然后突然发现一个vant的search组件前面的搜索图标变成方块了......
于是把上面代码修改了一下：

原[class^="icon-"], [class*=" icon-"] {
改为：
[class^="icona-"], [class*=" icona-"] {

把.icon-ios-alert:before {
改为:
.icona-ios-alert:before {

其他图标也照样修改，也就是把icon改为icona，让其匹配不到vant的组件。