自定义字体显示图标字体

2022-09-24 17:54 | 阅读量: 0 | 标签: tutorial, enhance, unicode

---

有没有发现别人的应用中很多小的图标，在界面设计时挺好看的？

虽然可以把想要的图标截图，然后使用图像框显示图标，但是缺点就是颜色不能变化，如果图像放大可能失真有锯齿。

那如何在App Inventor中使用图标字体呢？

1. 获取图标字体文件

网上有很多现成的图标字体，比较有名的有FontAwesome （https://fontawesome.com/）

打开FontAwesome网站，点击Start，向下滑动，点击Download，再点击Download Font Awesome Free for the Web,就可以下载了。

下载完成后，得到一个zip压缩文件，解压缩，进入webfonts文件夹，里面有三个.ttf文件就是我们需要的字体文件，上传到App Inventor素材。

还有其他的图标库，比如iconfont 阿里巴巴矢量图标库，关于如何下载iconfont字体文件，请网络搜索“Iconfont 下载ttf”

2.使用图标字体

字体中每个图标都有一个unicode与之对应，主要思路就是使用Enhance扩展设置字体和HTTP客户端将unicode解码成标签文本。

在项目中拖入Enhance扩展和HTTP客户端（在通讯连接面板中），新建一个函数方便后面重复调用：

注意那个素材文件fa-solid-900.ttf,如果你使用的其他字体文件，请替换为你的文件名。

比如我们要显示一个五角星，可以这样：

你可以随意的更改标签的文本颜色、字体大小。

3. 如何找到unicode

那这么多图标，我们如何知道那个图标对应什么unicode呢？

我们可以登录这里https://fontawesome.com/v5/cheatsheet， 所有FontAwesome的图标的unicode都在这里。这里为了方便，我已经截图放在下面

：