 关注我们

 工具导航

 设计素材

 软件分享

 原创作品

交互设计素材分享平台

用户使用帮助手册

 网站首页

 返回列表

Copyright © www.AxureUX.com, All Rights Reserved.

专业的交互原型素材原创分享平台

AxureUX作品内图标显示是方框或乱码问题

AxureUX发布的大部分作品使用了FontAwesome字体图标方案，2019年前的作品使用的字体版本是v4.7版本，2019年以后的作品中使用了较新的v5版。在使用时请确保你的机器上已经安装了对应版本的FontAwesome字体文件，如果未安装字体将导致在编辑界面中相关图标显示为乱码。由于v5版采用了新的字体类型，并不是向下兼容的，如果你下载的作品中分别用到了v4.7和V5两个版本的字体图标，则需要同时安装两个版本对应的字体文件。其中v5又分为了Free和Pro两个版本，也并不是完全兼容的，所以作品里用的是哪个版本就需要安装对应版本的字体文件。下面为对应版本的字体图标专题页面及字体文件获取方式，详细使用方法请查看对应版本的使用说明。会员可以通过会员群文件【FontAwesome字体图标方案】目录获取对应字体文件。

问题编号：

Q000

 热门问题

 问题反馈

FontAwesome v4.7字体图标方案专题页面

http://www.axureux.com/fontawesome/v4.html

注：专题页面提供了FontAwesome v4.7版字体文件下载以及详细使用说明文档

FontAwesome v5字体图标方案专题页面(Pro版)

https://www.axureux.com/fontawesome/pro.html

注：FontAwesome v5 Pro版字体文件和使用说明在对应的作品目录中单独提供，专题页面仅提供全部图标列表

FontAwesome v5字体图标方案专题页面(Free版)

https://www.axureux.com/fontawesome/free.html

注：专题页面提供了FontAwesome v5 Free版字体文件和对应的rplib图标元件库下载，以及详细使用说明文档

字体图标常见异常问题

1、如果已经安装了FontAwesome字体文件但是图标还是无法正常显示，一般是没有正确安装对应版本的字体文件，目前我们的作品里使用的版本有v4.7，v5 Free，v5 Pro三个版本，作品中用的是哪个版本就需要安装对应版本的字体文件。一般在对应的作品说明文档中会注明当前所用的版本，或在编辑界面中选中图标后查看字体属性中的字体名称，如果显示为FontAwesome则为v4.7版，显示为FontAwesome 5 Free则为v5 Free版，显示为FontAwesome 5 Pro则为v5 Pro版，显示为Font Awesome 5 Brands则为v5版的品牌图标，品牌图标是Free版和Pro版中都包含的。

2、使用了字体图标的文件需要在发布中设置WEB字体选项，使图标在演示时可以正常显示。如果已经安装了字体且图标在编辑时可以正常显示，但是在预览时却显示异常，一般是由于没有设置WEB字体CSS链接或者设置的链接不正确。v4.7，v5 Free，v5 Pro三个版本的CSS链接同样是独立的，文件中使用了哪个版本设置对应的链接即可，链接在对应版本的说明文档中均有提供。另外，如果原型文件上传至Axshare、Axhub等原型托管平台，链接地址必须是https开头的，http开头则会导致图标异常。

选中图标后在样式中查看字体属性

3、三个版本的字体图标可以同时安装和使用，即使是在同一个文件中都没有问题。但是由于对应的图标和类型无法完全兼容，使用时复制的是哪个版本的图标，要选择对应的字体和类型，选择了错误的字体和类型可能会导致图标无法正常显示。例如从v4.7版专题页面里面复制的图标，将图标的字体设置为FontAwesome v5 Free，图标可能是无法正常显示的（部分可以显示）。

Axure RP9字体选项设置界面  打开方式：发布—生成HTML文件

Axure RP8字体选项设置界面  打开方式：发布—生成HTML文件

4、Axure RP8中页面样式里面的字体系列应该为默认项Applied Font，修改这个选项会覆盖当前页面中所有字体属性。例如，将这个选项修改为“微软雅黑”后，当前页面所有的字体都会统一按“微软雅黑”显示，从而导致字体图标的字体设置无效而无法正常显示，这个设置在Axure RP9中已经被移除了。

Axure RP8页面样式设置   保持为默认项Applied Font