Question

我正在尝试使用JQUERY将我的图像添加到按钮，我在示例https://forum.jquery.com/topic/custom-icons-on-jquery-ui-button中尝试了相同的操作，但它不适合我。链接我的plunker http://plnkr.co/edit/PjsMCzsR0fAG2sGo6utK?p=preview

更新了图片文件的网址。这是我的代码

    <!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<style> 
.ui-wp-icon {
    background-image: url(http://findicons.com/files/icons/1714/dropline_neu/128/edit_undo.png) !important;
}
</style>   

<script>

$(document).ready(function(){   
    $( "#wpbutton" ).button({
        icons: { primary: "ui-wp-icon"}
        });
});

</script>
</head>
<body>
<button id="wpbutton">Wordpress</button>
</body>
</html>

Answer 1

首先，按钮上的.ui-icon课程将背景位置设置为16px 16px。删除该类，或使用以下命令在CSS中覆盖它：

background-position: 0 0;

此外，您的图像比它应该适合的空间大很多。您只会看到左上角的位置，它是透明的。设置背景大小以适合图标元素：

background-size: contain;

所以你的CSS现在变成了：

.returnIcon {
    background-image: url(http://findicons.com/files/icons/1714/dropline_neu/128/edit_undo.png) !important;
    background-position: 0 0;
    background-size: contain
}

将自定义图像添加到jquery按钮

1 个答案: