Is there a way to set the source of the image to font-awesome icon

Question

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}/>

Answer 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; }