jquery移动导航栏图标大小答案

【问题标题】：jquery mobile navigation bar icon sizejquery移动导航栏图标大小
【发布时间】：2012-02-19 11:23:38
【问题描述】：

我正在为我的导航栏使用这段代码

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

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案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*/
}

【讨论】：

如果要将尺寸更改为 32x32 用于低分辨率和 80x80 用于高清屏幕。它不工作。需要你的建议
使用像@media only screen and (min-width: 32em) {这样的媒体查询。

【解决方案2】：

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

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

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

祝你好运。

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

jquery mobile 中的 .ui-icon 类的边框半径为 9 px - 这可能是导致您出现问题的原因。尝试将您的 css 更改为：

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

【讨论】：