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

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

的示例：

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

Answer 2

嗯，这是一个老问题，但现在答案是肯定的！ 前往font-awesome，搜索图标并选择“svg”选项。复制该 svg 并将其保存为字符串，例如：

svg = "<svg xmlns="http://www.w3.org/2000/svg" viewBox=..."

现在，当您像这样分配

this.state.image1

时，魔法就会发生：

this.state.image1 = "data:image/svg+xml," + svg

这会将您的 font-awesome 图标放置为

<img>

元素的 svg 图像源。