FontAwesome v5 Free版字体图标使用说明

本使用说明主要基于v5 Free版本

v5 Free专题页 v5 Free字体库

来源：FontAwesome v5版权归AxureUX网站所有，本站只整理收集，支持作者可购买Pro正版。

安装字体

  • 系统安装：FontAwesome v5 Free版字体文件

    第一步、首次使用FontAwesome v5 Free版字体图标需要在本机上安装字体文件，在字体图标专题页面下载【字体文件及元件库】文件包。
    第二步、解压缩后打开【font-awesome-free\otfs】，将目录内3个字体文件完成安装。
    第三步、Win系统双击字体文件就会提示安装，Mac系统安装字体方法请见下面的链接。
    第四步、字体安装完成后需要重新启动Axure或PhotoShop等设计软件，重启后选中字体时在字体列表中如果能看到【Fontawesome 5 Free】和【Fontawesome 5 Brands】，则代表字体已经安装成功。

    Mac系统如何安装字体方法教程:

    查看视频教程

  • Axure安装：在未安装字体的设备上显示字体图标

    如果我们已经在本机上安装了Fontawesome 5 Free字体文件，在预览原型文件时字体图标是可以正常的，但输出的原型在其它在未安装字体文件的电脑上演示时图标依然显示为乱码，只需要设置一下Web字体选项即可解决这个问题。注意：这种方法，如果将Axure文件给到未安装字体，并不能上网的电脑上，是无法看到图标的；

    第一步、在发布设置中Web字体选项中添加外部Web字体CSS链接，下面是CSS外部链接地址。

    第二步、添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，设置名称为【Font Awesome 5 Free】
    第三步、将CSS链接地址添加到URL中，生成HTML文件即可。
    第四步、如何使用字体图标，请查看下面【使用说明】

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





  • Axure安装：在未联网环境下演示时显示字体图标

    如果输出的原型在未联网环境下进行演示，可以在发布设置中添加本地Web字体CSS链接，这种方法是使用相对路径调用的字体资源。

    第一步、在添加本地CSS链接前需要将【font-awesome-free】文件夹拷贝到【Axure安装目录\DefaultSettings\Prototype_Files\resources\】中，下面为拷贝完成后的截图。


    第二步、完成拷贝后再添加CSS链接，添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，设置名称为【Font Awesome 5 Free】，CSS链接地址设置为【resources/font-awesome-free/css/all.css】，生成HTML文件即可。
    第三步、如何使用字体图标，请查看下面【使用说明】



  • Web安装：本地安装

    第一步、将【font-awesome-free】文件夹拷贝到 你站点的根目录（也可放在站点其他目录，只要调用路径正确即可）；
    第二步、在页面里调用路径，将下面代码插入到页面的<head> </head > 之间；

    注意：这是安装路径【/font-awesome-free/css/all.min.css】根据自己安装位置调整即可；
    注释：【/font-awesome-free/css/】里有两个【all.css】和【all.min.css】文件，调用任何一个都可以；
    第三步、如何使用字体图标，请查看下面【使用说明】



  • Web安装：外部调用

    这种安装，只要在页面插入官网提供的CSS库链接即可，无需下载和部署字体，简单、方便；唯一就是保证外部链接提供的服务稳定；
    第一步、在页面里调用路径，将下面代码插入到页面的<head> </head > 之间；

    第二步、如何使用字体图标，请查看下面【使用说明】



使用字体

  • 常用设计软件，如何使用FontAwesome v5 Free字体图标

    第一步、通过 [v5 Free字体库专题页面] 在列表中找到需要的图标，点击即可复制图标。这个操作跟在网页中复制文本的操作是相同的
    第二步、返回到常用的软件界面中，在对应的文字编辑中将图标字符粘贴进去。
    第三步、这个时候我们看到的图标仍然是一个乱码字符，我们需要选中这个乱码字符，在字体属性中将它的字体设置为【Fontawesome 5 Free】或【Fontawesome 5 Brands】，图标就能正常显示了



  • Axure软件，如何使用FontAwesome v5 Free字体图标

    除了以上常用软件的方法，也可以用Axure元件库的图标
    第一步、使用字体图标元件库。在【字体文件及元件库】文件包有提供的rplib格式的元件库文件，将元件库文件导入到Axure元件库中
    第二步、使用时从元件库列表中找到需要的图标，直接拖入到编辑界面中就可以了。
    注意，如果元件库列表中图标未正常显示，请在安装字体文件后刷新元件库，或者将元件库卸载后重新载入，元件库的图标列表就可以正常显示了。

    特别说明，Fontawesome 5 Free版的图标共分为Solid（实心图标）、Regular（常规图标）、Brand（品牌图标）三种类型。通过专题页面中的图标列表复制图标到Axure中时，需要在字体设置中选择对应的类型，否则图标在预览时将无法正常显示 。


    复制Solid类型图标到Axure，字体需要设置为：
    Awesome 5 Free，字体类型选择：Solid


    复制Regular类型图标到Axure，字体需要设置为
    Font Awesome 5 Free，字体类型选择：Regular


    复制Brand类型图标到Axure中时，字体需要设置为
    Font Awesome 5 Brands



  • Web页面，如何使用FontAwesome v5 Free字体图标

    前面通过【4】或【5】的Web安装，已经安装和调用字体CSS样式库，现在教大家如何在页面使用字体图标；
    第一步、通过 【v5 Free字体库专题页面】 在列表中找到需要的图标，点击即可复制图标。这个操作跟在网页中复制文本的操作是相同的
    第二步、将粘贴过来的图标在页面里，单独增加一个内联元素标签，如：<span>、<b>、<i>等标签，
    第三步、加完标签后，再个字体样式即可显示图标；格式示例：<span class="fa">粘贴的图标</span>
    效果展示：
    未加样式的效果：、、
    增加样式的效果：、、

    特别说明，Fontawesome 5 Free版的图标共分为Solid（实心图标）、Regular（常规图标）、Brand（品牌图标）三种类型。所以有三个样式调用；
    olid（实心图标）：<span class="fa">实心图标</span> 效果展示：
    Regular（常规图标）：<span class="far">常规图标</span> 效果展示：
    Brand（品牌图标）：<span class="fab">品牌图标</span> 效果展示：
    提示：实心与常规图标是同一个图标，只是更换class样式即可，而品牌则是单独的图标和样式；




    Web页面，特殊效果调用方法：

    特殊效果，是在原有的字体样式上，增加一个特定的样式即可；

    效果名称 效果代码 代码格式 效果展示 拷贝代码
    旋转效果(快) <span class="fa fa-pulse">图标</span>
    旋转效果(慢) <span class="fa fa-spin">图标</span>
    正常图标 <span class="fa">图标</span>
    旋转90度 <span class="fa fa-rotate-90">图标</span>
    旋转180度 <span class="fa fa-rotate-180">图标</span>
    旋转270度 <span class="fa fa-rotate-270">图标</span>
    水平镜像 <span class="fa fa-flip-horizontal">图标</span>
    垂直镜像 <span class="fa fa-flip-vertical">图标</span>
    水平垂直镜像 <span class="fa fa-flip-both">图标</span>(类同旋转180度)
    .625em
    em：是一个相对单位，它的值是相对于元素的字体大小
    换算公式：【目标字体大小】 = 【原始字体大小】 * 【em值】
    如：【原始大小：20px;】【font-size:1.5em;】
    那么【目标字体大小】=【20px】*【1.5】= 30px
    		<span class="fa fa-2xs">图标</span>
    .75em <span class="fa fa-xs">图标</span>
    .875em <span class="fa fa-sm">图标</span>
    1em <span class="fa fa-1x">图标</span>

    提示后面还有： fa-2x、 fa-3x、 fa-4x、 fa-5x、 fa-6x、 fa-7x、 fa-8x、 fa-9x、 fa-10x、 这里就不一一列举出来，大家自行尝试一下；



其他说明

  • 一个文件同时使用多个FontAwesome版本

    A、FontAwesome字体图标的多个版本是可以在同一个Axure的原型文件中，但是建议不要将对应的图标和类型进行混用。
    B、例如我们在一个原型文件中或Web页面同时使用了FontAwesome的v4.7、v5 Free、v5 Pro、v6 Pro四个版本的字体图标，需要安装这个四个版本对应的字体文件，然后在发布设置的Web字体设置中设置对应名称和CSS链接
    C、另外，v5 Pro版中已经包含了v5 Free版的全部图标，如果已经使用了v5 Pro版，建议不要再同时使用v5 Free版了
    D、v6 Pro版也已发布，其中品牌有三处图标下架，其他已经包含了v5 Free版和v5 Pro版，已购买过的用户可以使用新版；



  • 字体图标无法正常显示问题说明

    A、首先应检查字体文件是否已经正确安装，或者安装的字体版本是否与使用的版本是否一致。
    B、目前官方的字体图标有v4.7、v5 Free、v5 Pro、v6 Pro四个版本，这三个版本是独立的，需要单独的安装和设置。
    C、另外，通过专题页面中的图标列表复制字体图标时，在Axure中需要设置对应的字体和图标类型，具体设置方式在第2点中有详细说明。
    D、如果在Axure 8中遇到编辑界面中图标可以正常显示，但是在预览时却是乱码的现象，可能是由于修改了页面的样式里面的“字体系列”选项导致的。
    E、这个选项默认的是【Applied Font】，请不要去修改它，否则会覆盖页面中所有的字体属性设置而导致字体图标失效。



  • 关于图标使用的补充说明

    A、在下载的【字体文件及元件库】文件包中还单独提供了FontAwesome v5 Free全部图标的Svg格式，使用SVG格式图标不需要安装字体文件或设置WEB字体选项，直接将对应的图标文件拖入到Axure编辑界面中即可。
    B、SVG格式图标同样是矢量的，支持无限放大，同时在Axure中右击图标可转为化形状，然后可以修改它的颜色或其它样式。
    C、Fontawesome包含的图标类型基本满足原型设计的需要，如果在设计中需要更多的图标，可以查看网站的图标推荐，建议配合使用阿里的IconFont图标库，它提供的图标数量达到了数百万，网址：https://www.iconfont.cn
    阿里IconFont FontAwesome官网 bootcdn样式库

复制成功