6.3 更加个性化的显示图标
上一节展示了怎样在按钮中显示图标，虽然链接在尾部栏中可以默认显示为按钮，但那却并不是真正的按钮。那么本节从基础开始讲解按钮的一般用法。
首先，准备一个文件index.html，按照范例进行编写。
【范例6-3 17 种默认图标的显示】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title> 17种默认图标</title>
06 <meta name="viewport" content="width=device-width, initial-scale=1">
07 <link rel="stylesheet" href="jquery.mobile.min.css" />
08 <script src="jquery-2.1.4.min.js"></script>
09 <script src="jquery.mobile.min.js"></script>
10 </head>
11 <body>
12 <div data-role="page">
13 <div data-role="content">
14 <a href="#" data-role="button" data-icon="arrow-l">左箭头</a>
15 <a href="#" data-role="button" data-iconpos="left" data-icon=
"arrow-r">右箭头</a>
16 <a href="#" data-role="button" data-iconpos="left" data-icon=
"arrow-u">上箭头</a>
17 <a href="#" data-role="button" data-iconpos="left" data-icon=
"arrow-d">下箭头</a>
18 <a href="#" data-role="button" data-iconpos="left" data-icon=
"delete">删除</a>
19 <a href="#" data-role="button" data-iconpos="left" data-icon=
"plus">添加</a>
20 <a href="#" data-role="button" data-iconpos="left" data-icon=
"minus">减少</a>
21 <a href="#" data-role="button" data-iconpos="left" data-icon=
"check">检查</a>
22 <a href="#" data-role="button" data-iconpos="left" data-icon=
"gear">齿轮</a>
23 <a href="#" data-role="button" data-iconpos="left" data-icon=
"forward">前进</a>
24 <a href="#" data-role="button" data-iconpos="left" data-icon=
"back">后退</a>
25 <a href="#" data-role="button" data-iconpos="left" data-icon=
"grid">网格</a>
26 <a href="#" data-role="button" data-iconpos="left" data-icon=
"star">五角星</a>
27 <a href="#" data-role="button" data-iconpos="left" data-icon=
"alert">警告</a>
28 <a href="#" data-role="button" data-iconpos="left" data-icon=
"info">信息</a>
29 <a href="#" data-role="button" data-iconpos="left" data-icon=
"home">首页</a>
30 <a href="#" data-role="button" data-iconpos="left" data-icon=
"search">搜索</a>
31 </div>
32 </div>
33 </body>
34 </html>
范例运行效果如图6-4和图6-5所示，由于一次要显示17个按钮，屏幕的尺寸不足，所以不得不将页面上的内容分割成两幅图来显示它们。通过对这两幅图的观察，还可以复习上一节介绍过的17种默认按钮的样式。
图6-4 按钮图标显示在按钮左侧1
图6-5 按钮图标显示在按钮左侧2
仔细观察代码第14和第15行，找出它们的不同之处。可以发现第15行中加入了属性data-iconpos而第14行没有。这里可以根据单词iconpos推测出，该属性的作用是设置图标显示的位置，但是在图中发现这两个按钮图标显示的位置并没有什么区别，于是就可以推测出在jQuery Mobile中按钮图标是默认显示在按钮左侧的。
再与第6.2节中的图6-2进行一些对比可以发现，本范例中的图标都是显示在按钮左侧的，而在图6-2中的按钮都是显示在按钮顶端的。范例6-2中并没有用到设置图标位置的属性，这当然是jQuery Mobile设计的结果，使按钮图标在不同的状态下会默认显示在某个位置。比如，导航栏中的按钮图标默认是显示在按钮顶端的，而一般按钮的图标则默认显示在按钮的左侧。
虽然jQuery Mobile的开发者设置了按钮图标默认应该显示的位置，但是他们保留了对使用者的尊重，所以留下了相应的属性，开发者可以通过设置这些属性来修改图标显示的位置。
可以将范例6-3中的data-iconpos属性分别设置为right、top和bottom，使按钮图标分别显示在按钮的右侧、上方和下方，运行结果分别如图6-6、图6-7和图6-8所示。
图6-6 按钮图标显示在按钮右侧
图6-7 按钮图标显示在按钮上方
图6-8 按钮图标显示在按钮下方
除了这几种显示方式外，在很多时候开发者还会想要以图标的形式来显示按钮，这种情况下，可以将data-iconpos属性的值设为notext来达到想要的效果，图6-9是将范例6-3中的data-iconpos全部改为notext之后的效果。
图6-9 仅显示图标的按钮
提示
尽管设置了notext之后的按钮宽度变得很小，但是它仍然独自占用页面中的一行，这时就需要配合有效的布局或者分组，来实现屏幕空间的有效利用。
也许读者在尝试为按钮加入图标时会出现图标处为空白样式的情况，主要有两种原因：一是代码本身出现了问题；二是当所引用的js或css样式文件在本地时，没有配套的图标文件与之对应。
那怎么解决呢？很简单，在jQuery Mobile官网上找到zip file并下载整个文件，解压后可以找到一个名为image的文件夹，将此文件复制到所使用的jQuery Mobile目录下，图标就可以正常显示了。