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的導航欄上的圖標大小

回答

相關問題