我正在尝试在我正在制作的有趣项目中使用 bartender.css。我希望用我自己的图标替换默认图标,但似乎找不到如何做到这一点。这里还有一个未解决的 stackoverflow:JQuerymobile 和 Bartender Tabbar - 单独的图标,但我觉得应该再次询问它,因为插件的许多事情似乎在过去一年左右发生了变化。在示例中,它显示了五个不同的图标。但是我找不到需要更改的 CSS 中的哪些位置。我相信图标 Urls 位于 css 的这一部分:
/* ============= SEPERATE CSS-SPRITES ======================= */
/* 7b. SEPERATE */
/* REGULAR */
.soloSprite li a .ui-btn-inner {
display: inline-block;
position: static;
height: 30px;
width: 30px;
background-color: none;
background: url("sprite_lo-res.png") no-repeat;
background-size: 300px 44px;
-o-background-size: 300px 44px;
-webkit-background-size: 300px 44px;
-moz-background-size: 300px 44px;
-ms-background-size: 300px 44px;
}
.soloSprite li a[data-icon="features"] span:only-child { background-position: 0px 0px }
.soloSprite li a[data-icon="brands"] span:only-child { background-position: -60px 0px }
.soloSprite li a[data-icon="fees"] span:only-child { background-position: -30px 0px }
.soloSprite li a[data-icon="contact"] span:only-child { background-position: -90px 0px }
.soloSprite li a[data-icon="about"] span:only-child { background-position: -120px 0px }
.soloSprite .ui-icon::before {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40ffffff,EndColorStr=#12ffffff);
zoom: 1;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.15)), to(rgba(255,255,255,.0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.25) 0%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.0) 48.5%, rgba(255,255,255,.0) 100% );
background-image: -ms-linear-gradient(top, rgba(255,255,255,.25) 0%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.0) 48.5%, rgba(255,255,255,.0) 100% );
background-image: -moz-linear-gradient(top, rgba(255,255,255,.25) 0%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.0) 48.5%, rgba(255,255,255,.0) 100% );
background-image: -o-linear-gradient(top, rgba(255,255,255,.25) 0%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.0) 48.5%, rgba(255,255,255,.0) 100% );
background-image: linear-gradient(top, rgba(255,255,255,.25) 0%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.0) 48.5%, rgba(255,255,255,.0) 100% );
}
更新:我已经建立了一个 JsFiddle。任何帮助表示赞赏。http://jsfiddle.net/excUq/