使用fontawesome字体

2024-05-13 09:31:59

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

字体图标问题

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

"headerToolbar": [  "reload"
]

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

进入浏览器调试可以跟踪到，这个是一个使用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';

但是这样做我们需要多导入伊特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";

问题解决

使用fontawesome字体相关推荐

如何在AxureRP7中使用FontAwesome字体
我们使用Axure制作原型时,经常会使用到各种小图标.有些朋友自己制作.有些到网上下载,然后使用截图导入到Axure中使用.这样做非常繁琐,有些朋友问Axure是否能够像图像处理工具那样便捷灵活滴使用 ...
wordcloud：利用fontawesome字体绘制图标词云图
根据文本生成词云的操作很常见,在某些场景下,我们可以遇到图标也按照某种形状排列的情况,那么可以用生成词云图的方法生成这样的图标词云图吗? 如何应用fontawesome字体当前最常见的图标字体就是w ...
在canvas中应用font-awesome字体
在大屏应用中,如果能充分使用font-awesome字体,不仅可以节省大量的图标设计时间,还能充分利用字体文件的矢量特性,轻松添加stroke与fill样式. 解决方法分为三步: 1.必须首先引入fo ...
WPF 使用FontAwesome字体图标
要搞点小软件,又不想使用图标和图标类库,突然想起FontAwesome,试了一下,还挺方便的,先弄了几个最常用的图标试一下,弄了几个按钮的样式,看一下效果: 看一下fontAwesome使用方法: 首 ...
CSS Font-awesome字体图标库文件
当出现需要引用的图标,需要link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.m ...
微信小程序中引用FontAwesome字体最完整教程附下载源码
目的:在小程序实现,FontAwesome.省去制作图标,引用图标的烦恼主要步骤,下载>转码>合并样式>引用样式,不会的可下载源码 1.到Font Awesome官网下载字体包 ...
微信小程序中引用FontAwesome字体
1.到Font Awesome官网下载字体包官网链接:Font Awesome中文官网 2.打开1中下载的压缩包找到.ttf文件如下图所示: 3.上传2中的字体文件到https://transfo ...
微信小程序引用fontawesome字体
1.到fontawesome官网下载字体包. 2.打开1中下载的压缩包找到.ttf文件. 3.上传2中的字体文件到https://transfonter.org/,选择base64 编吗 ,conve ...
在React中使用FontAwesome字体
FontAwesome是一种图标字体. 安装依赖 1. 安装基础依赖 npm i --save @fortawesome/fontawesome npm i --save @fortawesome/r ...

最新文章

热门文章