FontAwesome字体图标安装、应用图文教程

Font Awesome提供可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

下载字体

https://pan.baidu.com/s/1ubd837bvSnxqRDgPo3wlqw

提供otf、ttf两种格式字体下载，任选一个，或全部下载都可以（后续安装同理）

安装字体

方法1：将字体复制粘贴到C:\Windows\Fonts

方法2：左键双击字体，点击安装

方法3：右键单击字体，点击安装

安装成功后的效果：打开axure软件，在字体选择中可以看到fontawesome字体

应用字体

pmgod.cn网站提供26大行业，共计546个FontAwesome v4.7.0 字体图标

字体图标访问快捷路径：

http://www.pmgod.cn/resource/fontawesome.html

1、选择、复制字体图标

选择需要使用的字体图标，左键双击选择、右键单击复制

2、粘贴、应用字体图标

将字体图标复制到所在位置时，初始状态是一个类似正方形框框的图标

选择字体图标，修改字体、大小、颜色、对齐方式后效果如下：

3、预览效果

常见问题

我的原型能正常预览字体图标，为什么发给他人之后，他人却看不到效果

解决办法1：对方安装FontAwesome字体

解决办法2：【发布】-【预览选项】-【配置】-【Web字体】中进行设置，添加链接到“.css”文件，URL中填写“https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css”（对方需要在线联网）

解决办法3：【发布】-【预览选项】-【配置】-【Web字体】中进行设置，@font-face{}内容区填入以下内容（该方法需要将fontawesome-webfont.ttf字体放在生成的原型文件夹根目录下）

font-family: FontAwesome;

src:url('fontawesome-webfont.ttf') format('truetype');