how to change “add to wish list” button with an image

Question

How do I change this 'add to wish list' button into an icon? I have a png file for this button

I did some research online. Some people say by CSS, but not work for me

<style>
.product-social-links .action.towishlist:before {
    background-image: url('/wysiwyg/icons-like-customize-share-sized.png');
}
</style>

Answer 1

<style>
.product-social-links .action.towishlist:before {
    content:'';
    display:inline-block;
    height:   //as per icon size
    width:'';   //as per icon size
    background-image: url('/wysiwyg/icons-like-customize-share-sized.png');
}
</style>

Answer 2

Replace the anchor tag in ,

app/design/frontend/[yourtheme]/Magento_Wishlist/templates/catalog/product/view/addto/wishlist.phtml

<a href="#"
   class="action towishlist notify-wishlist"
   data-post='<?= /* @noEscape */ $block->getWishlistParams() ?>'
   data-action="add-to-wishlist"><span><img src="<?=$block->getViewFileUrl('images/icons-like-customize-share-sized') ?>"/></span></a>

Add the icons-like-customize-share-sized.png in

app/design/frontend/[your theme]/web/images