有没有一种方法将图像源设置为 Font Awesome 图标？

Question

我有一个div，它默认会有一张虚拟图片。当点击该div时，我会将src设置为相机拍摄的照片。到目前为止，这个虚拟图片是一个URL链接。但现在有人建议我使用font-awesome。是否有办法将`image`标签的`src1`设置为font-awesome图标。

以下是`image`标签代码：

<img className="cam" src={this.state.image1} onClick={this.camera} data-cam={1}/>

- gates

---

是的，只需将 className 设置为 null，然后在单击后将其设置为您的图标类，例如 fa fa-chrome。 - knowbody

我想你可以设置一个 background-image，但你也必须设置一个 height 和 width。不确定这样做是否有什么好处。 - putvande

为什么在你编辑之前我的代码没有显示颜色？@James - gates

@gates 因为你用了内联代码标签 \code`，而我是用四个空格缩进的 code`。 - James Donnelly

这对于 i 标签可以正常工作，但不适用于图像。@knowbody - gates

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

- James Donnelly