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版本，使用方法相同。