未安装字体时，如何正常显示原型中的FontAwesome图标？

Fontawesome字体图标具有轻量和友好的特性，非常适合在Axure原型设计中进行应用，能很好地表达页面需求，又不会干扰UI人员的设计工作。

正常情况下，我们在电脑上已经安装了 Fontawesome 字体文件，在预览Axure原型HTML文件时，字体图标是显示正常的；如果将输出的原型HTML发布到网上，或在其它未安装字体文件的电脑上演示时，图标就会显示为空或乱码，这种情况怎么解决呢？

我们只需要在Axure中设置一下Web字体选项即可解决这个问题。

方法一：有联网时

在Axure的发布设置中，在Web字体选项中添加外部Web字体CSS链接。添加方式：发布_生成HTML文件_Web字体，勾选“包含Web字体”，点击＋图标，设置名称（可随意），然后将CSS链接地址添加到URL中，再生成HTML文件即可。

下面分别是Axure 8和9设置WEB字体选项的截图。

CSS链接地址：https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css

方法二：未联网或未安装字体

方法一是基于互联网来实现，那么如果是未联网的设备，又怎么办呢？

我们可以在发布设置中添加本地Web字体CSS链接，这种方法是使用相对路径调用的字体资源。

首先添加CSS链接，添加方式：发布_生成HTML文件_Web字体，勾选“包含Web字体”，点击加号图标，设置名称（可随意），CSS链接地址设置为【resources\Font-Awesome\css\all.css】，生成HTML文件。

然后将包含CSS和字体的【Font-Awesome】文件夹，整个拷贝到【原型HTML目录\resources\】中，如下图。


CSS文件中包含字体文件的相对路径，因此该路径必须与字体文件的存储路径一致，才能正常显示字体图标（如下图所示）。

PS：Unicons字体图标的使用方法亦可以参考本文。

---

推荐Axure字体图标库

Unicons线形字体图标元件库 https://blog.csdn.net/congzi530/article/details/118569808

FontAwesome v5.15.3 字体图标元件库 https://blog.csdn.net/congzi530/article/details/111060099