有没有办法将图像的来源设置为 font-awesome 图标答案

【问题标题】：Is there a way to set the source of the image to font-awesome icon有没有办法将图像的来源设置为 font-awesome 图标
【发布时间】：2015-11-04 22:18:09
【问题描述】：

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

这是图片标签

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

【问题讨论】：

是的，只需将 className 设置为 null 并在单击后将其设置为您的图标类，例如fa fa-chrome
我想您可以设置background-image，但您还必须设置height 和width。不知道你是否从中获得了什么。
为什么我的代码在您编辑之前没有以颜色显示？ @詹姆斯
这对于 i 标签，而不是图像 @knowbody 工作正常

标签： html css reactjs font-awesome

【解决方案1】：

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

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

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

当父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; }

【讨论】：