开发者

Icon inside button in HTML

开发者 https://www.devze.com 2023-01-23 08:39 出处:网络
I need to put small icon inside button in HTML (for example I need to have facebook button on my site, inside button first F icon and then \"facebook\"). How to do开发者_StackOverflow that ?<button

I need to put small icon inside button in HTML (for example I need to have facebook button on my site, inside button first F icon and then "facebook"). How to do开发者_StackOverflow that ?


<button><img src="facebook.png" alt=""> Facebook</button>


.facebook-button {
  background: url('https://2.bp.blogspot.com/-lFFvYHv-Z8w/WAOFS0P5FdI/AAAAAAAAF68/Aiv0D5NkUKIbL3_6G42LZm1iQ6co1tmgACLcB/s320/facebook-16px.png') left center no-repeat;
  padding-left: 15px;
}
<!DOCTYPE html>
<html>

<body>
<input type="button" class="facebook-button" value=" Facebook" />
</body>
</html>


Add the following data using the path name for the image

 <img src="images/facebook-logo.png"/> 

Add the width and height attributes if you want to resize the icon

 <img src="images/facebook-logo.png" width="75" height="75"/> 
0

精彩评论

暂无评论...
验证码 换一张
取 消