在jQuery-UI中調整圖標大小

我發現jQuery UI中的圖標對於我的應用程序來說有點小。調整.ui-icon的大小當然沒有幫助，因爲圖像是從單個圖像文件加載的，因此它只會顯示其他圖標的部分。在jQuery-UI中調整圖標大小

有沒有任何方法可以調整圖標大小，而無需調整每個大小的圖標圖像文件的大小我想要使用？

來源

2011-03-10 adamnickerson

不可以。因爲圖標被打包到CSS sprite網格中，所以如果您嘗試使圖標本身變大（如您所見），您將只能看到它周圍的圖標。您可以通過調整邊距來增加圖標的「大小」 - 但這不會使圖形更大 - 僅佔用空間。

編輯 - 看起來jQuery UI團隊已經聽到這個投訴，並將在下一個版本的jQuery UI中發佈roll out some larger icons。

來源

2011-03-10 16:09:10 JasCav

當然，增加幅度不，我期望什麼，但不遺憾的是解決問題。我有一些更老的眼睛，我需要請大圖標:) – adamnickerson 2011-03-10 17:30:10

@adamnickerson - ： - \是的，我完全理解。其實，我剛剛發現了一篇博文，我認爲*會爲你回答你的問題。在上面的答案中看到更新... – JasCav 2011-03-10 17:38:58

感謝您找到這篇文章 - 絕對期待下一個版本。乾杯。 – adamnickerson 2011-03-10 19:18:41

請注意，只要創建了使用它的CSS樣式，就可以真正使用任何圖標，而且它不必位於精靈包中。 jQuery UI Buttons中的「圖標名稱」實際上只是一個類名。

博客「坐下沃爾多」有很好的例子here。它演示了使用最優秀的FAMFAMFAM顏色圖標集，但您可以真正使用他的「核心」來調整位置，然後在自己的CSS中使用任何圖標。

用他的榜樣是很容易的只是下載的文件（你只需要CSS和圖標文件夾），然後將這些行添加到您的HTML文件

<link href="libs/famfamfam/css/fff.icon.core.css" type="text/css" rel="stylesheet"/> 
<link href="libs/famfamfam/css/fff.icon.icons.css" type="text/css" rel="stylesheet"/>

然後使用圖標名稱中的一個在你的選擇。
{icons: {primary: 'fff-icon-connect'},text: false}

PS，遺憾的是它並沒有像新尺寸選項爲jQuery用戶界面也沒發生，即使他們7個月前談論它。他們確實讓他們變得更大一點，但他們沒有引入一個全新的尺寸。

來源

2011-09-12 15:07:09 studgeek

這是一個老問題，但這裏是我的解決方案（如果你喜歡砍）：

.ui-icon-circle-close { 
    -ms-transform: scale(2); /* IE 9 */ 
    -webkit-transform: scale(2); /* Chrome, Safari, Opera */ 
    transform: scale(2); 
}

對於一個只有圖標按鈕，它的偉大工程。

來源

2014-05-28 11:48:51 SiliconValley

即使圖標看起來不好後執行CSS規則，它無論如何工作。謝謝。 – 2015-01-09 15:56:14

也許和zoom一樣：https：//stackoverflow.com/questions/18696085/how-to-use-the-bigger-jquery-icons – 2017-12-09 18:51:51

試試這個http://mkkeck.github.io/jquery-ui-iconfont/

來源：https://github.com/mkkeck/jquery-ui-iconfont

它需要只包括jQuery的ui.icons.css和字體目錄。

jQuery的圖標大小可以改變這樣的：

<style type="text/css"> 
    .ui-icon { 
     font-size: 1.2em; 
    } 
</style>

來源

2015-07-10 11:50:21 sytolk

在jQuery-UI中調整圖標大小

回答

相關問題