FontAwesome v6 Pro字体图标使用说明

专业的交互设计素材分享平台

 返回网站

 项目首页

 全部图标

 FontAwesome v6 Pro字体图标使用说明

 FontAwesome v6 Pro 有什么新的特性？

FontAwesome是一种可无限缩放的矢量字体图标，支持使用CSS所提供的全部特性设置其样式，包括大小、颜色、阴影、背景等，它非常适合在 Axure 原型设计中进行应用，可以方便实现按纽或元件的各种交互效果。AxureUX发布的大部分作品使用了FontAwesome字体图标方案，在以前发布的作品的分别使用过v4.7版本和v5 Pro等版本。v6 Pro字体图标相比于之前的版本，包含了更全面的图标分类和海量优质图标，并且支持十多种样式风格，可满足于各种业务类型和场景使用需求。

 字体图标使用视频教程

 FontAwesome v6 Pro 可以兼容低版本吗？

FontAwesome各个版本字体文件间并不相互兼容，每个版本的字体文件只对相同版本的字体图标有效，所以使用时需要正确安装对应版本的字体文件。例如系统中已经安装过v6 Pro版字体文件，但是Axure文件中所使用的是v5 Pro版本，还需要再安装v5 Pro版本的字体。系统中可以安装多个版本的FontAwesome字体文件的，同时在Axure中使用也并不会冲突，但是需要设置对应的字体属性和CSS链接，否则图标显示可能会出现异常。

 如何安装 FontAwesome v6 Pro 字体文件？

FontAwesome所有版本的字体文件安装方法都是一样的，将下载的v6 Pro字体图标文件压缩包完成解压后，找到并打开otfs目录可以看到全部的字体文件，所有的字体文件都需要安装。Win系统中双击字体文件会提示安装，或者选中全部字体文件复制粘贴进系统字体目录（C:\Windows\Fonts）内完成安装，Mac系统安装字体方法请百度查看。字体安装完成后需要重新启动Axure，如果只是在Axure中编辑才需要安装字体文件，查看演示文件并不需要安装字体文件。

 如何在 Axure 中使用 FontAwesome v6 Pro？

通过FontAwesome v6 Pro版字体图标列表页面中找到需要的图标，然后双击图标会自动选中并复制图标字符。返回到Axure软件界面中后，在对应的元件中将图标字符粘贴进去，此时图标显示的是一个乱码字符，需要选中这个字符后，在字体属性中将其字体设置为 Font Awesome 6 Pro，图标就能正常显示了。如果是品牌图标，则需要将字体设置为 Font Awesome 6 Brands 。

 如何修改 FontAwesome v6 Pro 图标样式？

最新的v6 Pro版本支持Classic（经典）、Sharp（锋利）、Duotone （双色）等多种图标样式，每种样式又可设置Solid（实心）、Regular（常规）、Light（简约）、Thin（极细）等属性，所以每个图标可以变化出许多种形态，在设计中可以根据需要调整图标的风格，创造出更炫酷的设计效果。在Axure中使用时只需要选中图标字符，在字体属性中调整对应的字体属性，图标的样式就会变化。需要说明的是，目前部分浏览器对Duotone样式的支持不是太佳，所以不建议在Axure中使用。

 如何在未安装字体的设备上显示字体图标？

如果Axure生成的原型文件在其它电脑或设备上查看时图标显示为乱码，只需要设置一下Web字体选项即可解决这个问题。以Axure RP9中的设置方式为例，在“发布”菜单中点击“预览选项”，然后点击“配置”，选择“Font”选项，在设置中添加字体名称“Font Awesome 6 Pro”，在下方添加对应的CSS链接后生成原型文件即可，对应的CSS链接地址在压缩包中有提供。如果需要多个版本的字体链接，可以点击“添加字体”按钮完成添加。

 如何在 Axure 中设置字体图标交互效果？

Fontawesome字体图标具有跟字体一样的特性，我们可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影等。设置方法跟设置字体的样式是一致的，选中图标字符后在字体属性面板进行设置。除此之外，我们还可以对包含字体图标的元件设置选中、悬停、禁用等各种交互样式，这也是Fontawesome字体图标在原型设计中最易用的特点，用它来制作具有交互样式的按纽和组件会变得非常方便。

 字体图标无法正常显示的常见异常问题。

如果在Axure编辑界面中图标无法正常显示，一般是没有安装FontAwesome字体文件，或者安装的字体文件与Axure文件中使用的版本不一致，FontAwesome各版本的字体文件并不兼容，所以需要正确安装对应的字体文件。如果在浏览器中预览原型时图标没有正常显示，一般是没有设置WEB字体CSS链接，或者设置的CSS链接不正确，不同版本的FontAwesome字体文件所对应的CSS链接也不一样。如果在Axure的样式属性中添加了草图效果，或者修改了页面的默认字体属性，也会导致字体图标无法正常显示。在Axure RP8的页面样式里面的字体系列为默认的Applied Font，此选项不能修改。