
有没有想过如何在不牺牲速度或质量的情况下为应用程序添加流畅、可扩展的图标?这就是图标字体的用途!图标字体就像普通字体,但我们使用的是图标而不是数字和字母。这些图标可以是任何东西,从简单的形状和箭头到更复杂的对象或概念表示形式。图标字体首先在网页设计中流行,因为它们允许开发人员和设计人员轻松地在网站上插入可扩展的矢量图标。之后,出于同样的原因,它们成为了应用程序世界的必备品。
两者都在 试用 UI 套件以及我们的自定义服务,我们使用图标字体,因为它们使我们的生活变得更加轻松。使用图标字体有很多好处:
在本文中,我们将介绍您需要了解的有关图标字体的所有信息,从选择现有的图标字体到如何构建自己的字体的分步指南。
有许多专门提供图标的图标库,其中很多都是基于订阅的,但别担心!还有其他不错的免费选项可以开始构建自己的图标字体。 材料设计 来自谷歌,有大量的图标库,你可以免费下载。

另一个不仅提供免费套餐而且还有 Figma 插件的很棒的库是 字体太棒了。但是,如果你能随时寻找适合你的应用程序风格的其他图标库,那么有很多。

尽管非常简单,但这一步很重要,因为为了获得完美的图标字体,我们需要图标具有一些特殊的特征。在我们的 Figma 项目文件中,我们应该有一个包含这些图标的框架,为了组织起见,我们甚至可以将它们分组成副标题。这些图标应具有以下属性:
就是这样,如果你的图标满足这些要求,你就可以将它们导出为 SVG 并按照最后几个步骤进行操作了。
现在我们已经选择并准备好了图标,下一步是构建我们的图标字体。在 UXDivers,我们使用 IcoMoon,我有个好消息!IcoMoon提供免费计划和付费计划。两者之间的唯一区别是,使用免费套餐,您可以将本地保存在浏览器的缓存中,这意味着如果您更换计算机或清理缓存,仅此而已,您将无法回来编辑。

1。移除免费套装: 你会看到的第一件事是一组名为 “icoMoon-免费” 的图标。你可以点击标题右边的三行和 “删除图标”,继续删除那组图标。

2。导入图标: 导航栏的左侧有一个紫色按钮,上面写着 “导入图标”。当你点击它时,会弹出一个对话框,你可以导入你的图标。

3.选择: 现在您导入了图标,应该会出现一个名为 “无标题集” 的新图标。在字体中选择所有你想要的图标。
专家提示: 要快速选择图标,只需在要选择的图标上单击并拖动光标即可。

4。生成字体: 选择图标后,底部导航栏中将出现一个名为 “生成字体” 的按钮,点击它。

5。首选项: 在此阶段,您可以访问导航栏左侧的 “首选项” 按钮,以更改字体的名称和您可能要编辑的其他设置。

6。下载: 仅此而已!现在,您可以通过点击底部导航栏右侧的 “下载” 按钮来下载字体。

通过执行这些步骤,您现在有了创建和实现自己的图标字体的工具,从而增强了应用程序的功能和视觉吸引力。
图标字体为保持设计的一致性、可扩展性和组织性提供了一种无缝方式。无论你是在中使用它们 试用套件 或者您个人的努力,图标字体是现代应用程序开发的重要组成部分,它可以使您的工作流程更加流畅,应用程序更具吸引力。那么,为什么不试一试,看看图标字体如何提升你的下一个项目呢?