adding custom image to jquery button -


i trying add image button using jquery, tried same example https://forum.jquery.com/topic/custom-icons-on-jquery-ui-button, not working me. link plunker http://plnkr.co/edit/pjsmczsr0fag2sgo6utk?p=preview

updated url image file. here code

    <!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> 

first of all, .ui-icon class on button sets background position 16px 16px. remove class, or overwrite in css using:

background-position: 0 0; 

also, image lot bigger space should fit in. see top left bit, transparent. set background size fit inside icon element:

background-size: contain; 

so css becomes:

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

Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -