有没有办法将图像的来源设置为字体真棒图标

Question

我有一个 div，默认会有一个虚拟图像。单击 div 时，我将 src 设置为相机图片。直到现在，虚拟图像曾经是一个 URL。但现在有人建议我使用 font-awesome。有什么方法可以将图像标签的 src1 设置为 font-awesome 图标。

这是图片标签

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

Answer 1

不会。Font Awesome 不使用图像作为图标，并且img没有src属性的元素是无效的 HTML。

您可以做的是添加逻辑以显示或隐藏图像旁边的虚拟图标。这是class在父包装器上使用 a 的示例：

<div className="show-icon">
    <i className="fa fa-..."></i>
    <img src="..." />
</div>

当父div元素的类为 时.show-icon，您可以使用 CSS 来显示图标并隐藏图像：

<div className="show-icon">
    <i className="fa fa-..."></i>
    <img src="..." />
</div>