今天马克笔设计留学的May老师将会继续为大将带来有关Axure的图文基础教程，这一期主要讲的是元件的使用，如果小伙伴们对于Axure有其它任何疑问，可以随时和小编联系哦！如果你对于教程有任何建议，请给我们留言吧，会有精美礼品相送哦！
本节将以“使用站内账号登录千图网”这个案例来介绍带图标的文字提示和边框变色效果。
初始页面：（该版本为千图网2017年3月份版本）
效果页面：（以下展示的为制作后的效果，除图标有出入外，其他与3月千图网效果一致）
效果说明：
光标定位到文本框（文本框获取焦点）时，提示文字隐藏、边框由灰色变成蓝色、图标由灰色变成绿色。
思路分析：
1）边框在两种状态下切换：灰色——未选中，蓝色——选中；
其中的图标也在两种状态下切换：灰色——未选中，绿色——选中；
2）文本框获取焦点时，选中边框，呈现蓝色，图标呈现绿色；
3）文本框失去焦点时，取消选中边框，呈现灰色，图标呈现灰色。
页面元件：
制作之前：
在制作具体的效果之前，先向大家介绍如何在Axure中使用FontAwesome字体图标。
1） FontAwesome图标字体在线使用
访问 http://fortawesome.github.io/Font-Awesome/下载最新版本的FontAwesome，解压下载的压缩文件
打开font文件夹，双击安装.otf和.ttf结尾的字体
打开Axure，发布>>预览选项（或ctrl+F5）>>配置>>web字体。
–点击“+”号，输入字体名称FontAwesome，
–选择链接到css文件，
–输入地址：http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css【地址中的4.3.0需要根据版本更换，目前最新版为4.7.0】
–确定，关闭
打开图标列表网址 http://fortawesome.github.io/Font-Awesome/cheatsheet/ 选择中意的图标，复制图标
在axure中拖入一个标签元件（任何可以输入文字的都行），设置字体为FontAwesome，将文本替换（粘贴）为刚复制的图标。F5预览
2） FontAwesome图标字体离线使用
假设你已经下载了FontAwesome，并且能够在Axure使用该字体了。
打开Axure，Ctrl+F5>配置>web字体>“+”，名称写“FontAwesome”（注意：要和css文件里面的“font-family”一致），路径写“resources/css/font-awesome.min.css” 【这里为什么这样写呢？因为Axure生成的html文件，其样式是存放在resources文件夹下的，写在这里是为了和Axure的文件结构保持一致。】
确定，关闭设置页面，在Axure工作区中添加两个文本便签，一个文本标签随意写些文字，如“This is the normal text!”另一个标签复制FontAwesome图标，F8生成。
打开生成的文件夹，找到resources文件夹并打开，打开FontAwesome解压后的文件夹，复制fonts文件夹到resources文件夹，打开FontAwesome下的css文件夹，将“font-awesome.min.css”文件复制到resources文件夹下的css文件夹。
注：离线使用主要是为了在没有安装fontAwesome字体的电脑上查看制作效果，使其正常显示。
准备清单：
千图网logo
效果制作：
案例中用户名及密码前面的图标都需要用到FontAwesome图标字体。
1.打开网址http://fortawesome.github.io/Font-Awesome/cheatsheet/，在该页面找到需要的图标，复制即可。
【按住Ctrl+F，在右上角出现的搜索框中输入关键词查找可以提高寻找的效率。】
2.将复制的图标分别粘贴至username和password这两个矩形中，将字体选择为FontAwesome字体，并将左填充设置为10。如下图所示。
3.设置Username矩形和Password矩形选中时的样式为蓝色边框，图标字体颜色为绿色。注意选中时线宽、圆角这样的小细节。
4.选中Username文本框，为其添加交互事件——获取焦点时。在“检视：文本框>>属性”下找到“获取焦点时”，并双击。在弹出的“用例编辑<获取焦点时>”进行如下编辑。
失去焦点时，我们唯一需要改变的是将“选中”换成“取消选中”，将“true”换成“flase”。这两部分都操作完成后会看到如下的添加完成的交互事件。
5.Password文本框要为其做类似的设置，按照上述步骤完成即可。
按照上述步骤设置完成后，按住F5预览即可看到效果。
