对jquery mobile来说,使用data-icon属性配置,可以设置元素的图标。图标没有变成右箭头,而是如下图所示:

//已经设置了图标  ,data-icon="home" data-iconpos="top"
<div class="ui-block-a"><a href="#" data-icon="home" data-iconpos="top" data-theme="a" data-role="button">首页</a></div>

而且是无论我怎么添加data-icon到任何元素上面,都是没有图标显示,最后发现,由于jquery mobile是使用CSS 3来渲染UI的,需要有一个图片集,

解决步骤:

1、下载。从下载的官方jquery mobile包里面,找到图片如下:

2、拷贝images文件夹到项目文件夹下。

目录结构如下:

icon图片需要与jquery mobile 的css文件在同一目录底下的images文件夹中,原因从jquery.mobile-1.3.1.min.css中可以看出:

在我的工程中,目录添加如下:

这样,jquery mobile就会自行去找到data-icon定义的图标,成功看到了图标:

原文:jquery mobile中图标不显示问题 - yangjun19890825的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/wlsyn/article/details/9969487

jQuery Mobile 图标无法显示的更多相关文章

  1. jQuery Mobile 图标

    jQuery 图标 如需在 jQuery Mobile 中向按钮添加图标,请使用 data-icon 属性: <a href="#anylink" data-role=&qu ...

  2. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  3. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  4. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  5. jquery mobile 自定义图标

    Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任 ...

  6. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  7. 【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)

    在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...

  8. jQuery Mobile 手动显示ajax加载器,提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  9. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

随机推荐

  1. 能用存储过程的DBHelper类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  2. oracle sqlldr控制文件模板

    Sqlldr userid=lgone/tiger control=a.ctl LOAD DATA INFILE 't.dat' // 要导入的文件 // INFILE 'tt.date' // 导入 ...

  3. mysql5.7.14安装与配置

    参考文章链接: http://jingyan.baidu.com/article/afd8f4de9006d934e286e9fd.html http://www.cnblogs.com/wenthi ...

  4. 好用的自适应表格插件-bootstrap table (支持固定表头)

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  5. ecshop 报错

    ECShop出现Strict Standards: Only variables should be passed b (2014-06-04 17:00:37) 转载▼ 标签: ecshop 报错 ...

  6. python读取excel文件

    一.xlrd的说明 xlrd是专门用来在python中读取excel文档的模块,使用前需要安装. 可以到这https://pypi.python.org/pypi/xlrd进行下载tar.gz文件,然 ...

  7. about Red_Hat_Enterprise_Linux_7

    systemd systemd 是 Linux 的系统和服务管理程序,替换了 Red Hat Enterprise Linux 之前的发行本中使用的 SysV.systemd 与 SysV 和 Lin ...

  8. highcharts-Highmaps 动态传入城市名称

    做前端按地区(地图)分布监控数据展示用了 HIGHMAPS JAVASCRIPT MAPS 控件,很好很强大. 基础实现是这样的:调用插件动态传入需要展示的数据(data),插件会在地图数据(mapd ...

  9. AndroidStudio 更新gradle Error:Failed to complete Gradle execution. Cause: Connection reset

      Android Studio 报错:Error:Failed to complete Gradle execution.  Cause: Connection reset.把最新可以运行的项目中g ...

  10. fixSidebar简介与修正log

    fixSidebar是自己写的一个侧边栏固定小组件,主要是用于主内容较长时让侧边栏能保持显示,依赖于jQuery. Github地址 https://github.com/iRuxu/fixSideb ...