【转】AxureRP8实战手册-案例1（文本框：带图标文字提示）
实战案例篇
本篇包含110种实战案例，案例内容均来自互联网知名网站或应用。案例中所包含的基础操作不做详细介绍，如有疑问请参考基础操作篇。
本篇内容由浅至深。前四章围绕基础知识点结合案例进行讲解；最后两章，挑选了Web端与APP端相对典型的案例，对知识点进行综合的应用，并着重加强实现思路的分析。
本篇内容建议初学者按顺序学习，理解实现的过程、思路与技巧，并以能够独立完成案例为学习目标。
第1章 元件案例
本章主要讲解主要元件的使用方法及应用场景。
在本章的案例中，大家能够看到，常见的一些网页都能够通过各种基本形状的组合模拟出来。
案例1. 文本框：带图标文字提示
案例来源:
淘宝首页-搜索框
案例效果：
- 输入文字前：（图1-1）
- 输入文字后：（图1-2）
元件准备：
- 页面中（图1-3）
案例描述：
在搜索框里面，文本框中的文字提示包含图标。
思路分析：
文本框可以添加文字提示，而图标字体中的图标也是文字。那么案例中的搜索图标，我们就可以使用图标字体来实现。
操作步骤：
1、双击安装FontAwesome字体文件，载入FontAwesome4.4.0图标字体元件库；
2、切换到FontAwesome4.4.0图标字体元件库；
3、从元件库中找到图标，拖放到画布；
4、双击图标，复制里面的图标文字；
5、将复制的内容粘贴到文本框属性的{提示文字}中，并输入其它文字；（图1-4）
6、点击【提示样式】，在样式设置界面中设置提示文字字体为“FontAwesome”，字体颜色为灰色。（图1-5）
7、参考“基础56”，在web字体设置中添加FontAwesome字体的设置方案。
补充说明：
- 本案例需要结合特殊字体元件：FontAwesome4.4.0图标字体元件库。该元件库在本书的配套资料中。
- 使用FontAwesome4.4.0图标字体元件库，除了要参考“基础30”载入元件库，还要安装相应的字体文件。安装字体文件时，请先关闭Axure，安装完字体文件后，打开Axure方可正常使用。
备注：本站中FontAwesome图标字体元件库已升级为4.5.0版本，使用方法相同。
转载请注明：Axure原创教程网 » AxureRP8实战手册-案例1（文本框：带图标文字提示）
其他参考：
FontAwesome字体图标安装、应用图文教程 – 简书 https://www.jianshu.com/p/796d772fc9a2
字体图标访问快捷路径： http://www.pmgod.cn/resource/fontawesome.html