使用fontawesome字体_frontawesome字体

ant design pro是摈弃font字体图标的，取而代之的是svg。这是一种好的做法，可以更加自由并且系统体积也更小了。但是amis采用font-awesome字体图标，这就有点问题，我们必须兼顾。

字体图标问题

最开始我们使用amis的时候，引入的样式表是amis精简后的css，这个文件比较小不到1MB，但是遇到一些带图标的按钮有可能显示不出来，比如以下的schema，我们再使用crud组件的时候希望在工具栏上面显示一个刷新按钮，代码如下:

"headerToolbar": [  
       "reload"
]
1
2
3

这个时候我们会发现，刷新按钮的图标显示不出来。

进入浏览器调试可以跟踪到，这个是一个使用fontawesom字体的图标。amis内部是使用fontawesome字体的，如果我们把amis全部css和字体库都导入到我们系统里面，就可以使用全部的样式库了。这样这个刷新按钮的图标也就可以显示出来了。
代码如下：

import 'amis/sdk/iconfont.css';
import 'amis/lib/themes/cxd.css';
import 'amis/lib/helper.css';
import 'amis/sdk/cxd.css';
1
2
3
4

但是这样做我们需要多导入伊特sdk/cxd.css 文件，这个文件接近3MB。并且fontawesome在其他React组件中并不能共享。为此，全局导入fontawesome要划算许多，整个awesome才1.25MB,如果全局导入我们可以在更多地方用到。

导入font-awesome字体图标

1、下载并解压到src/font=awesome
2、在global.tsx里面执行导入

import "./font-awesome/less/font-awesome.less";
1

问题解决