使用自己的图像更改jQuery UI按钮的图标

目前我有以下jQuery UI按钮：

$('#button').button( { label: 'Test', icons: {primary: 'ui-icon-circle-plus', secondary: null} } ); 

我希望将自己的图像用于名为’custom.png’的按钮。

我怎么能做到这一点？

Answer 1

自己定义一个样式，如下所示：

 .ui-icon-custom { background-image: url(https://stackoverflow.com/questions/3224537/change-the-icon-of-a-jquery-ui-button-with-own-image/images/custom.png); } 

然后在调用.button()时使用它，如下所示：

 $('#button').button({ label: 'Test', icons: {primary: 'ui-icon-custom', secondary: null} }); 

这假设您的自定义图标位于CSS下方的图像文件夹中…与jQuery UI图标地图通常所在的位置相同。 当图标创建时，它会得到一个类： class="ui-icon ui-icon-custom" ，而ui-icon类看起来像这样（可能是不同的图像，具体取决于主题）：

 .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); } 

所以在你的风格中你只是覆盖那个background-image ，如果需要改变宽度，高度等。

Answer 2

看看尼克克拉弗的评论。 我完全按原样尝试了他的答案，但它仍然没有帮助我。 问题（我假设）是ui-icon-custom类位于类列表的末尾，并且似乎没有将其覆盖到原始的ui-icon类背景图像。

我做了什么让它工作是添加！重要的是这样的图标css的结尾

 .ui-icon-custom { background-image: url(https://stackoverflow.com/questions/3224537/change-the-icon-of-a-jquery-ui-button-with-own-image/images/custom.png) !important; } 

您可能需要更改高度和宽度属性，但这对我有用。

Answer 3

也许我在OP中遗漏了一些东西，但这对我来说没什么问题。 您可以将按钮定义为DIV并在其中放置一个表格。 没有覆盖css，你仍然可以使用jquery定义的图标和你自己的自定义大小的图标。 您还可以将图标放在文本周围的任何位置（顶部，左侧，右侧等）。

 $(document).ready(function() { $('#btn').button(); }); 

---

 
 
 
 
 
Search
 
 
  

Answer 4

在jquery ui css文件中搜索ui-icon-circle-plus类，然后将其复制为您自己的图像。

Answer 5

如果只有一个图像显示在按钮上，没有标签或文字，我这样做：

 $('#button').button(); 

将此图像元素替换为按钮：

但如果你喜欢跟随标签或文字，上面的tschlarm解释会更好。

Answer 6

检查此链接：

http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

 .bouton-image { background: #004963; width: 80px; } .ui-icon-wifi { width: 80px; height: 80px; background-color: #004963; background-image: url(../images/icones/icone_wifi_ispsm_mobile.png); background-position: 40% 40%; } 

Answer 7

容易或容易

 #bildwechseln { background-image: url('../images/my-png/bild.png'); width: 140px; height: 140px;}  

来自德国的问候