UWP风向标 - 为 Windows 10 商店通用应用构建图标字体

在上一个主题 向 Windows 10 商店通用应用中添加矢量图标 中,描述了如何在 Windows 10 商店通用应用中使用图标字体。本主题则将描述如何使用 Icomoon 或者 Fontello 构建可用于 Windows 10 商店通用应用的图标字体。

使用 Icomoon 构建图标字体

Icomoon 为设计人员与开发人员提供了 17 个免费的图标包,共 4129 个免费图标,这些图标都可以自由选用与组合,从中选出应用中需要的图标,制作成字体,并能在应用中使用。

开始

访问 https://icomoon.io/app/#/select 来使用 Icomoon APP 构建字体。

选择图标

选择需要添加字体中的图标。

加入新的图标包

Icomoon 默认选中了两个图标包,如果需要加入其他的图标包,可以滚动到网页最下方,选择 “ Add Icons Form Library...

选择需要加入的图标库,点击 “ Add ” 即可返回继续添加图标。

导入 SVG 图形

如果在图标库中没有找到您想要的图标,Icomoon 还支持可以导入 SVG 图形到字体中。

选择网页左上角的 “ Import Icons ” 选择 SVG 图形,即可将图标导入到一个新建的库。

图示的 “Untitled Set” 就是我们新导入的图标

创建用于 Windows 10 商店通用应用的图标字体

点击屏幕下方的 “ Generate Font ” 即可创建字体,并查看字体详情,点击 “ Download ” 可下载字体。

将字体添加到项目中

想要在 UWP 项目中使用字体,需要将下载的字体中添加到项目中。

解压下载的字体包,字体文件位于 icomoon/fonts/icomoon.ttf 将其加入 UWP 的项目中,将生成操作改为 “ 内容

获取用于 TextBlock 的 Unicode 代码

要想使用相应的图标,需要得到对应的 Unicode 代码,打开 icomoon/demo.html 即可看到其对应关系。

在 TextBlock 中显示图标

只需要将 TextBlock 的字体改为创建的图标字体,并输入对应的 Unicode 字符,&#是 XMAL 中用于将 Unicode 代码转义为 Unicode 字符的转义符。

<TextBlock Text="" FontFamily="Assets/icomoon.ttf#icomoon"/>  

使用 Fontello 构建图标字体

Fontello 拥有 2202 个可供选择的图标,开发人员和设计人员都可以随意组合这些图标,构建图标字体以供使用。

开始

访问 http://fontello.com/ 即可开始制作字体。

选择图标

选择需要添加字体中的图标。

导入 SVG 图形

Fontello 同样支持导入自己的 SVG 图形,只需要 SVG 图形文件拖拽到上面的 “ Custom Icons ” 区域即可。

下载创建的字体

选择完成后即可点击右上角的 “ Download webfont ” 即可下载图标字体。

将字体添加到项目中

想要在 UWP 项目中使用字体,需要将下载的字体中添加到项目中。

解压下载的字体包,字体文件位于 fontello-xxxxxxxx/font/fontello.ttf 将其加入 UWP 的项目中,将生成操作改为 “ 内容

获取用于 TextBlock 的 Unicode 代码

要想使用相应的图标,需要得到对应的 Unicode 代码,打开 fontello-xxxxxxxx/demo.html 勾选右上角的 “ show codes ” 即可看到 Unicode 代码。

在 TextBlock 中显示图标

只需要将 TextBlock 的字体改为创建的图标字体,并输入对应的 Unicode 字符,&#是 XMAL 中用于将 Unicode 代码转义为 Unicode 字符的转义符。

<TextBlock Text="" FontFamily="Assets/fontello.ttf#fontello"/>  

获取更多关于 UWP 风向标的文章:http://blog.higan.me/tag/uwp-vane/

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章