在WebFlow上使用Font Awesome
简易步骤
- 下载Font Awesome：https://fontawesome.com/
- 解压字体文件
- 上传Font Awesome字体文件到WebFlow
- 给目标盒子应用Font Awesome字体
- 应用自定义图标字体
详细步骤
下载Font Awesome
访问Font Awesome的官方网站 https://fontawesome.com/，下载字体文件。
在本节教程写作期间，Font Awesome的免费版本是5.0.2。
解压字体文件
解压刚刚下载好的Font Awesome文件，进入 fontawesome-free-5.0.2 > web-fonts-with-css > webfonts 文件夹，文件夹内部就是字体文件。
一会我们会把这里面的字体文件上传到WebFlow上。
上传Font Awesome字体文件到WebFlow
在「Dashboard 控制面板」界面，点击项目右下角三个点的按钮，在展开的菜单中，选择「Settings 设置」，你会看到设置面板。
切换到「Fonts 字体」设置下，找到「Custom Fonts 自定义字体」，点击「Upload 上传」按钮。
选中「fonts 字体」文件夹下面，全选字体文件，点击上传。如果字体文件中包含WebFlow认为不合理的文件，会被自动剔除。
注意，这时候字体上传步骤还没有完成，WebFlow会告知你他识别到正确的字体，要求你确认上传。
需要逐一点击右边的「Upload Font File 上传字体文件」按钮，才完成上传。由于每一行内容都太过类似，点击按钮的时候，会产生「点击错误」的错觉。不用在意，只需要把所有的按钮点击完成即可。有多少个字体文件，就要点击多少次。
完成上传的字体文件，会列在「Custom Fonts 自定义字体」栏目下。
给目标盒子应用Font Awesome字体
点击「Designer 设计师」按钮，切换到编辑器页面。
选中想要应用Font Awesome图标的盒子，切换到
「Styles 样式」面板，找到「Typography 排版」。将字体更新为「Fa 400」。
应用自定义图标
方法一：使用Unicode
你可以使用WebFlow的免费帐号实现。
在新窗口打开网页 http://fontawesome.io/cheatsheet/ ，放在手边。这个页面上可以快速查询到图标的Unicode。
在页面上找到想要使用的图标，这里以「fa-address-book」为例，选中对应的Unicode代码「」，拷贝。
双击盒子，进入输入模式，在盒子内粘贴Unicode代码，就可以看到图标。
接下来你可以通过调整字号大小，来调整图标的大小；通过调整文字颜色，来调整图标的颜色。
这个方法有一个限制：必须是在能够输入文字的盒子内才可以使用。WebFlow有一些盒子不能直接输入文字，常见与组件内部的盒子。
方法二：使用CSS class
这需要使用WebFlow的付费帐号实现。以后有机会再详细说明。