Question

我在导航栏中使用这段代码

<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 px图标时，jQuery Mobile将图标封装在一个圆圈内，因此只显示我自定义图标的某些部分，我想删除圆圈。

Answer 1

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

.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*/
}

Answer 2

我遇到了同样的问题。我用以下代码修复了它：

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

删除图标后面的黑色阴影圈，使其高度/宽度为22px。

祝你好运。

Answer 3

对于常规尺寸的两倍大的图标，请使用：

 .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。

Answer 4

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
}

jquery移动导航栏图标大小

4 个答案: