JQuerymobile和Bartender Tabbar-单个图标

问题描述

我对JQM和CSS还是很陌生，所以很抱歉这是一个简单的问题...

我一直在使用Bartender Tabbar(http://www.stokkers.mobi/valuables/bartender.html)和JQM.调酒师选项卡带有菜单图标示例.我想用库中的单个图标替换这些图标，例如glyphish.

我不确定Bartender CSS文件的哪些部分需要编辑以使它们加载单个图标...任何帮助将不胜感激.

我想我需要编辑下面的部分(来自Bartender.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% );    
}

解决方案

我收到了Bartender的创建者的回复……如果不使用他提供的标准模板创建自己的图标集，这是不容易的. /p>

I'm quite new to JQM and CSS so I am sorry if this is an easy question...

I've been playing around with the Bartender Tabbar (http://www.stokkers.mobi/valuables/bartender.html) and JQM. The Bartender tabbar comes with an example sprite of menu icons. I would like to replace these with individual icons from a library, such as glyphish.

I'm not sure what sections of the Bartender CSS files I need to edit to make them load individual icons...any help would be much appreciated.

I think I need to edit the section below (from Bartender.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% );    
}

解决方案

I received a response from the creator of Bartender...There is no easy to do this without creating your own icon set using the standard template he provides.

这篇关于JQuerymobile和Bartender Tabbar-单个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！