CODEWITHSUNDEEP
htmlcssreactjs
Riky Andreas
Riky Andreas

Reputation: 220

set image as icon inside button reactjs

I'm trying to make a custom icon use image but not working

This is my code

button className="btn-play" style={btnplaylist}>
<i className="btnplaylist"></i>
</button>

This is css

.btnplaylist {
  background-image: url("../icon/playlist.png");
}

.btn-play {
  background-color: transparent;
  border-radius: 25px;
  padding: 8px 12px;
  border-color: transparent;
  color: white;
  font-size: 2vh;
  outline: none;
}
.btn-play:hover {
  background-color: rgb(39, 39, 39);
}

This is the image

enter image description here

Can someone help me ? Thank you :)

Upvotes: 0

Views: 3805

Answers (1)

Alvison Hunter
Alvison Hunter

Reputation: 673

Hello Ricky,

I wasn't totally clear about your request, however I put together this snippet for you to use it as a guide on your own code. As you can see, I added some basic displaying rules to the CSS so that you could see your element on the screen.

Additionally, I have to mention that you need to check which folder you are using to render this note image(relative or absolute urls), since that could be an issue when rendering this in React. It is best to use a relative url to the root directory of your app.

For more information on Static content in React please visit this link.

I certainly hope this can help with your case. Cheers and keep coding, it is the best thing in the world!

// declare the functional component for the button
const CreateIconButton = props =>{
return (
<button className="btn-play">
<i className="btnplaylist"></i>
</button>
);
}

// Main component will be a class component
class RenderIconButton extends React.Component{
render(){
return(<div><CreateIconButton /></div>);
}; // End of Render
} // End of class component

// Let us render all in the root div on the DOM
ReactDOM.render(
<RenderIconButton />, document.getElementById('root')
);
.btnplaylist {
  background-image: url("https://i.sstatic.net/vD6k6.png");
  background-size: cover;
  width: 200px;
  height: 200px;
  display:block;
}

.btn-play {
  background-color: transparent;
  border-radius: 25px;
  padding: 8px 12px;
  border: 1px dotted #ccc;
  color: white;
  font-size: 2vh;
  outline: none;
}
.btn-play:hover {
  background-color:yellow;
  border:1px solid #333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<!-- This is the root div to render all react content -->
<div id="root"></div>

Upvotes: 1

Related Questions