I have a div, which will have a dummy image by defualt. I am setting the src to a camera picture when there is a click on the div. Till now that dummy image used to be an URL. But now I was suggested to use font-awesome. Is there any way that I can set `src1 of the image tag to font-awesome icon.
Here is the image tag
<img className="cam" src={this.state.image1} onClick={this.camera} data-cam={1}/>
No. Font Awesome does not use images for icons and an img
element without a src
attribute is invalid HTML.
What you can do instead is add logic to show or hide the dummy icon beside the image. Here is an example using a class
on a parent wrapper:
<div className="show-icon">
<i className="fa fa-..."></i>
<img src="..." />
</div>
When the parent div
element has a class of .show-icon
, you can use CSS to show the icon and hide the image:
div i.fa { display: none; }
div img { display: block; }
div.show-icon i.fa { display: inline-block; }
div.show-icon img { display: none; }