主题中的两个图标（白色，黑色）

Question

Jquery mobile有主题。我想使用带有主题A的黑色图标和带有主题B的白色图标 - 如何操作？我在themeroller中看不到合适的选项

Answer 1

你不需要ThemeRoller。您只需要将ui-alt-icon类添加到包含data-theme="a"或父容器的按钮。

带有data-theme="a"和黑色图标的按钮：

<a href="#" class="ui-btn ui-btn-icon-left ui-icon-home ui-alt-icon">Home</a>

带有data-theme="b"（ui-btn-b）和白色图标的按钮（默认）：

<a href="#" class="ui-btn ui-btn-b ui-btn-icon-left ui-icon-home">Home</a>

---

覆盖SVG图标颜色：

jQM 1.4使用SVG绘制图标而不是 png 。那些SVG与:after伪选择器一起使用，例如.ui-icon-home:after { background-image: url(SVG data); }。

要更改颜色，请复制要覆盖的图标的SVG数据并查找fill%3D%22%23。在下面的示例中，颜色为FFF（白色），将该值更改为您想要的任何 hex 颜色。

.ui-icon-home:after {
  background-image: url('data:image/svg+xml;charset=US-ASCII,...fill%3D%22%23FFF...');
}

蓝色图标0000FF

.ui-icon-home:after {
  background-image: url('data:image/svg+xml;charset=US-ASCII,...fill%3D%22%230000FF...');
}

  

<强> Demo