我有一个div,它默认会有一张虚拟图片。当点击该div时,我会将src设置为相机拍摄的照片。到目前为止,这个虚拟图片是一个URL链接。但现在有人建议我使用font-awesome。是否有办法将`image`标签的`src1`设置为font-awesome图标。
以下是`image`标签代码:
<img className="cam" src={this.state.image1} onClick={this.camera} data-cam={1}/>
我有一个div,它默认会有一张虚拟图片。当点击该div时,我会将src设置为相机拍摄的照片。到目前为止,这个虚拟图片是一个URL链接。但现在有人建议我使用font-awesome。是否有办法将`image`标签的`src1`设置为font-awesome图标。
以下是`image`标签代码:
<img className="cam" src={this.state.image1} onClick={this.camera} data-cam={1}/>
不,Font Awesome不使用图像作为图标,没有src
属性的元素是无效的HTML。
相反,您可以添加逻辑来显示或隐藏图像旁边的虚拟图标。以下是一个在父包装器上使用class
的示例:
<div className="show-icon">
<i className="fa fa-..."></i>
<img src="..." />
</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; }
className
设置为null
,然后在单击后将其设置为您的图标类,例如fa fa-chrome
。 - knowbodybackground-image
,但你也必须设置一个height
和width
。不确定这样做是否有什么好处。 - putvande\
code`,而我是用四个空格缩进的
code`。 - James Donnelly