自制图标字体FontAwesome

注：担心网址失效,以下内容属于转载复制。原地址：http://blog.sina.com.cn/s/blog_abd22d920102yhig.html

先安利三个网站

1 https://www.iconfont.cn/ 图标网站，素材的来源

2 https://icomoon.io/app/#/select 核心网站，制造Font

3 https://transfonter.org/ 小程序处图标会用到，主要做base64的转换

之所以会想到做这个，源于自己最近再弄个小程序，但小程序大小限制，不可能引用Font Awesome这个库，最好的形式当然就是按需取，这样子就能满足项目的需求。

下面介绍具体的流程，先找素材，然后在icomoon打开，并操作

好的，按照上面的步骤，此时你的本地应该有个文件，解压后，里面会有个demo,按照上面的，就是自定义的font了，PC上的到此就能使用了。

----------------------------------------分割线--------------------------------------------

但是仅仅上面的步骤，小程序端却是不能使用的，下面就介绍小程序端的使用，很简单，就是把上面的文件，转成base64，然后来使用。

安利的第三个网站就是做这个用的。

我是参考这位作者来的：

https://www.jianshu.com/p/936e3f09e217

大家可以看他的用法，稍微变通一下就行了，具体的步骤我就不写了（懒癌犯了）

最后的代码贴一下，大家可自行理解分析

@font-face {

font-family: 'icomoon';

src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype'),

url('icomoon.svg#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

.icon{

display:inline-block;

font-family: 'icomoon' !important;

speak:none;

font-style:normal;

font-variant:normal;

text-transform:none;

text-rendering:auto;