jquery移动导航栏图标大小
我在导航栏中使用这段代码
Home 使用以下CSS
.ui-icon-home { background: url("home.png") no-repeat 50% 50% !important; }
此代码完美地工作并替换默认图标图像，但我不能在这里使用大图标。 我想使用22 * 22像素图标。 当我尝试使用22 * 22 px图标时，jQuery Mobile将图标封装在一个圆圈内，因此只显示我自定义图标的某些部分，我想删除圆圈。
您可以使用以下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*/ }
我有同样的问题。 我用以下代码修复它：
.ui-icon { background-color: transparent; width: 22px; height: 22px; }
它删除了图标后面的黑色阴影圆圈，使其高度/宽度为22px。
祝好运。
对于常规尺寸的两倍大的图标，请使用：
.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 。
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 }