Jquery mobile有主题。我想使用带有主题A的黑色图标和带有主题B的白色图标 - 如何操作?我在themeroller中看不到合适的选项
答案 0 :(得分:3)
你不需要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>
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 强>