网上文章大多数写的都是把整个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';。
这样在小程序中就可以调用了。例：
<text class="io icon-ios-alert"></text>
<view class="io icon-ios-checkmark-circle" style="font-size:50px;color:red"></view>
四、附整个添加在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的组件。
