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

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

那如何在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扩展(在Kevinkun专栏中)和HTTP客户端(在通讯连接面板中),新建一个函数方便后面重复调用:

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

2021-12-29_1320112021-12-29_132011.png

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

2021-12-29_132016.png2021-12-29_132016

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


3. 如何找到unicode

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

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

fa-solid-900.jpg


标签: 字体

添加新评论