使用 jQuery Mobile 支持的网站使用我自己的主题（样式）设计和图标的正确方法是什么？答案

【问题标题】：What is the proper way to use my own theme (style) design and icons using jQuery Mobile powered website?使用 jQuery Mobile 支持的网站使用我自己的主题（样式）设计和图标的正确方法是什么？
【发布时间】：2011-07-05 03:07:50
【问题描述】：

jQuery mobile 有 5 个内置主题

http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/../../docs/api/themes.html

但是我做的手机网站设计不一样，图标也不一样。

如何以及在哪里编写自定义 css 并将默认图标更改为自定义图标？

我应该选择任何默认主题的 CSS 并对其进行更改吗？

我应该用我的图标替换默认图标以保持相同的名称吗？

【问题讨论】：

标签： jquery css jquery-mobile mobile-website

【解决方案1】：

我会拒绝对核心 jQM CSS 文件进行更改，而是在自己的 CSS 中覆盖您想要的内容。对于主题，您需要按以下方式滚动：

一个新的 ThemeRoller 工具将在 2011 年发布的 jQuery Mobile 1.0 中推出。与此同时，手动编辑默认主题中的基本色板和/或通过编辑主题 css 文件添加其他色板很简单：复制一个块色板样式，用新的色板字母名称重命名类，并调整颜色。

http://jquerymobile.com/demos/1.0a4.1/docs/api/themes.html

…对于自定义按钮图标，文档中的内容如下：

要使用自定义图标，请指定一个具有唯一名称的 data-icon 值，例如 myapp-email，按钮插件将通过在 data-icon 值前面加上 ui-icon- 来生成一个类并将其应用于按钮。然后，您可以编写一个针对 ui-icon-myapp-email 类的 CSS 规则来指定图标背景源。为保持视觉一致性，请创建一个 18x18 像素的白色图标，另存为具有 alpha 透明度的 PNG-8。

http://jquerymobile.com/demos/1.0a4.1/docs/buttons/buttons-icons.html

【讨论】：