[英]Is there a way to set the source of the image to font-awesome icon
I have a div, which will have a dummy image by defualt. 我有一个div,它将通过defualt有一个虚拟图像。 I am setting the src to a camera picture when there is a click on the div. 当点击div时,我将src设置为相机图片。 Till now that dummy image used to be an URL. 直到现在虚拟图像曾经是一个URL。 But now I was suggested to use font-awesome. 但现在我被建议使用font-awesome。 Is there any way that I can set `src1 of the image tag to font-awesome icon. 有什么方法可以将图像标签的`src1设置为font-awesome图标。
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. 不。字体Awesome不使用图像作为图标,没有src
属性的img
元素是无效的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: 以下是在父包装器上使用class
的示例:
<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
元素具有.show-icon
类时,您可以使用CSS显示图标并隐藏图像:
div i.fa { display: none; }
div img { display: block; }
div.show-icon i.fa { display: inline-block; }
div.show-icon img { display: none; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.