Axure实战案例之带提示文字的输入框 淘宝搜索框

　　文本框：带图标文字提示

　　案例来源：淘宝首页-搜索框

　　输入文字前：

　　输入文字后：

　　元件准备：

　　页面中

　　案例描述：

　　在搜索框里面，文本框中的文字提示包含图标。

　　思路分析：

　　文本框可以添加文字提示，而图标字体中的图标也是文字。那么案例中的搜索图标，我们就可以使用图标字体来实现。

　　操作步骤：

　　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方可正常使用。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。