2024 年 10 月 1 日

了解如何将自定义图标字体集成到.NET MAUI 应用程序中

了解如何创建自定义图标字体并将其集成到您的.NET MAUI 应用程序中。本指南逐步介绍了该流程,提供了无缝集成和自定义的技巧,以使用独特且可扩展的图标来增强应用程序的设计。
Image UXDIvers blog

有没有想过如何在不牺牲速度或质量的情况下为应用程序添加流畅、可扩展的图标?这就是图标字体的用途!图标字体就像普通字体,但我们使用的是图标而不是数字和字母。这些图标可以是任何东西,从简单的形状和箭头到更复杂的对象或概念表示形式。图标字体首先在网页设计中流行,因为它们允许开发人员和设计人员轻松地在网站上插入可扩展的矢量图标。之后,出于同样的原因,它们成为了应用程序世界的必备品。

两者都在 试用 UI 套件以及我们的自定义服务,我们使用图标字体,因为它们使我们的生活变得更加轻松。使用图标字体有很多好处:

  • 组织: 既然它是一种字体,你可以在同一个地方找到每个图标。
  • 一致性: 通过使用相同的字体样式创建它们,每个图标将共享相同的样式和视觉语言,这对于设计非常重要。
  • 基于矢量: 由于它们必须基于矢量,因此向上或向下缩放它们时不会损失质量。这意味着它们可以适应不同的屏幕尺寸,使其非常适合响应式设计。

在本文中,我们将介绍您需要了解的有关图标字体的所有信息,从选择现有的图标字体到如何构建自己的字体的分步指南。


选择现有的图标字体

有许多专门提供图标的图标库,其中很多都是基于订阅的,但别担心!还有其他不错的免费选项可以开始构建自己的图标字体。 材料设计 来自谷歌,有大量的图标库,你可以免费下载。

Google Fonts

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

Font Awesome

构建我们的图标字体

准备我们的图标

尽管非常简单,但这一步很重要,因为为了获得完美的图标字体,我们需要图标具有一些特殊的特征。在我们的 Figma 项目文件中,我们应该有一个包含这些图标的框架,为了组织起见,我们甚至可以将它们分组成副标题。这些图标应具有以下属性:

  • 尺寸: 它们的大小都应该相同(标准尺寸为 24x24)。
  • 轮廓笔触: 这意味着每个笔画都应该有概述。

    专家提示: 你可以在 MAC 上按 Cmd+Y 或在 Windows 上按 Ctrl+Y 在 Figma 上访问大纲模式
  • 统一:使用布尔运算(并集、减去、相交和排除),每个图标只能统一为一个元素。
  • 颜色: 通常,每个图标的颜色都应相同。

就是这样,如果你的图标满足这些要求,你就可以将它们导出为 SVG 并按照最后几个步骤进行操作了。

打包图标字体

现在我们已经选择并准备好了图标,下一步是构建我们的图标字体。在 UXDivers,我们使用 IcoMoon,我有个好消息!IcoMoon提供免费计划和付费计划。两者之间的唯一区别是,使用免费套餐,您可以将本地保存在浏览器的缓存中,这意味着如果您更换计算机或清理缓存,仅此而已,您将无法回来编辑。

IcoMoon

以下是有关如何将图标导入iComoon的分步说明:

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

Remove free set

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

Import icons

3.选择: 现在您导入了图标,应该会出现一个名为 “无标题集” 的新图标。在字体中选择所有你想要的图标。

专家提示: 要快速选择图标,只需在要选择的图标上单击并拖动光标即可。

Select icons

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

Generate font

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

Preferences

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

Download font

总结

通过执行这些步骤,您现在有了创建和实现自己的图标字体的工具,从而增强了应用程序的功能和视觉吸引力。

图标字体为保持设计的一致性、可扩展性和组织性提供了一种无缝方式。无论你是在中使用它们 试用套件 或者您个人的努力,图标字体是现代应用程序开发的重要组成部分,它可以使您的工作流程更加流畅,应用程序更具吸引力。那么,为什么不试一试,看看图标字体如何提升你的下一个项目呢?

Copy link
我们对新项目感到兴奋!

想着一个项目吗?
让我们开始工作吧。

开始一个项目