有没有办法将图像的来源设置为字体真棒图标
Is there a way to set the source of the image to font-awesome icon
我有一个 div,默认情况下会有一个虚拟图像。单击 div 时,我将 src 设置为相机图片。到目前为止,该虚拟图像曾经是 URL。但是现在我被建议使用 font-awesome。有什么方法可以将图像标签的 `src1 设置为超棒的字体图标。
这是图片标签
<img className="cam" src={this.state.image1} onClick={this.camera} data-cam={1}/>
没有。 Font Awesome 不使用图像作为图标,没有 src
属性的 img
元素无效 HTML.
您可以改为添加逻辑来显示或隐藏图像旁边的虚拟图标。这是在父包装器上使用 class
的示例:
<div className="show-icon">
<i className="fa fa-..."></i>
<img src="..." />
</div>
当父div
元素的class为.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; }
我有一个 div,默认情况下会有一个虚拟图像。单击 div 时,我将 src 设置为相机图片。到目前为止,该虚拟图像曾经是 URL。但是现在我被建议使用 font-awesome。有什么方法可以将图像标签的 `src1 设置为超棒的字体图标。
这是图片标签
<img className="cam" src={this.state.image1} onClick={this.camera} data-cam={1}/>
没有。 Font Awesome 不使用图像作为图标,没有 src
属性的 img
元素无效 HTML.
您可以改为添加逻辑来显示或隐藏图像旁边的虚拟图标。这是在父包装器上使用 class
的示例:
<div className="show-icon">
<i className="fa fa-..."></i>
<img src="..." />
</div>
当父div
元素的class为.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; }