jQuery Mobile的导航栏上的图标大小

我使用这段代码为我的导航栏jQuery Mobile的导航栏上的图标大小

<a href="#home" data-icon="home" data-iconpos="top" class="ui-btn-active ui-state-persist">Home</a>

与下面的CSS

.ui-icon-home { 
     background: url("home.png") no-repeat 50% 50% !important;  
}

此代码的工作完美，并取代默认的图标形象，但我不能在这里使用大图标。我想使用22 * 22像素图标。当我尝试使用22 * 22像素图标时，jQuery Mobile将图标封装在一个圆圈内，因此只显示我的自定义图标的一部分，我想删除圆圈。

来源

2012-02-19 h_a86

jquery mobile中的类.ui-icon的边框半径为9像素 - 这可能是导致问题的原因。试着改变你的CSS：

.ui-icon-home { 
    background: url("home.png") no-repeat 50% 50% !important;  
    -moz-border-radius:0px; 
    -webkit-border-radius:0px; 
    border-radius:0px 
}

来源

2012-02-19 12:37:56 Hessius

您可以使用以下css.This将覆盖默认值图标类。

.ui-icon-home { 
    background: url("home.png") no-repeat 50% 50% !important;  
    -moz-border-radius:0px; 
    -webkit-border-radius:0px; 
    border-radius:0px; 
    width:22px; 
    height:22px; 
    margin-top:-12px;/*Adjust this value to position the icon*/ 
}

来源

2012-02-19 16:32:19 user700284

如果想将大小更改为32x32的低分辨率和80x80的高清屏幕。它不工作。需要你的建议 – yokks 2013-07-18 18:14:08

使用媒体查询，比如'@media only screen和（min-width：32em）{'。 – untill 2015-05-19 10:24:15

我有同样的问题。我用下面的代码固定它：

.ui-icon { 
    background-color: transparent; 
    width: 22px; 
    height: 22px; 
}

它消除了图标后面的黑色阴影圆，并使其的22px高度/宽度。

祝你好运。

来源

2012-05-09 08:20:53

图标的两倍大，常规尺寸，使用方法：

.ui-icon-custom::after { 
    background-image: url("custom.svg"); 
} 
.big-icon { 
    padding-top: 4em; 
    height: 6em; 
} 
.big-icon::after { 
    margin-left: -1.3em; 
    width: 2.6em; 
    height: 2.6em; 
    background-size: 2.6em 2.6em; 
    border-radius: 0; 
}

其中custom.svg是你的自定义图标。请记住添加两个类到您的按钮：big-icon和ui-icon-custom。

来源

2015-05-19 10:23:28 untill

jQuery Mobile的导航栏上的图标大小

回答

相关问题