CSS replace text with image or svg-CodePudding

I have two buttons that i want to replace with chevrons.

(https://fontawesome.com/icons/chevron-right?s=solid&f=classic)

.button { visibility:hidden }

.button:after { visibility:visible; content:'>'; font-size: ~ 30px }

That's the way i'd do it.

But i would rather replace the buttons with an image / svg, instead of plain " > " characters.

Any solution?

CodePudding user response：

You can either use background-image for your .button:after or try below approach.

button {  
  border: none;
  background-color: transparent;
}

<button onClick='alert("clicked");'>
   <img src="https://cdn0.iconfinder.com/data/icons/merry-christmas-41/512/37-christmas-wreath-decoration-1024.png" width="48"/>
</button>