自定义jQuery Mobile网页按钮图标icon
时间:2014-12-16 10:11 来源: 我爱IT技术网 作者:微风
若不想要使用内建的jQuery Mobile的按钮图标icon，也不想要自己设计，可以百度一下，可以下载很多相关的精美icon图标
本例是作者使用了自己默认的两套图标icon图标，即：Font Awesome Icons与Origonal Icons，使用方式差不多，以下以Font Awesome Icons为例：
自己的个人主页由于某些原因，在这里就不便分享了，不过使用方法都是大同小异。
我具体的操作方式分享如下：
点击画面上的 "Download the Icon Pack"下载zip文件。如图所示：
跳到此页面，选择"download it”
解压缩下载的zip文件，将font、Images目录，以及jqm-icon-pack-fa.css加入自己的jQuery Mobile网站
在jQuery Mobile网页，引用jqm-icon-pack-fa.css，每一个button设置自己喜欢的data-icon attribute
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta name="viewport" content="width=device-width, initial-scale=1" /><link href="Content/jquery.mobile-1.3.1.min.css" rel="stylesheet" /><link href="Content/jqm-icon-pack-fa.css" rel="stylesheet" /><script src="Scripts/jquery-2.0.2.js"></script><script src="Scripts/jquery.mobile-1.3.1.min.js"></script></head><body><div data-role="page" id="Page1"><div data-role="header" data-position="fixed"><h1>jQuery Mobile</h1></div><!-- /header --><div data-role="content"></div><!-- /content --><div data-role="footer" data-theme="d" class="ui-bar"><div><a data-role="button" data-icon="hand-left">新增</a><a data-role="button" data-icon="hand-right">删除</a><a data-role="button" data-icon="hand-up">上一笔</a><a data-role="button" data-icon="hand-down">上一笔</a></div></div><!-- /footer --></div></body></html>
执行的效果:
您也可以挑选喜欢的图标icon，操作的网址即界面如下图所示，当然这方面的知识可以找专业的美工来制作。
注明：本文米米猫分享。
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-