在 className 属性中反应字体真棒无法正常工作答案

【问题标题】：react font awesome not working correctly in className property在 className 属性中反应字体真棒无法正常工作
【发布时间】：2021-10-20 04:25:36
【问题描述】：

我试过下面的代码，

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';

<i className="fa fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>

它正确显示图标fa-edit，但是当我尝试使用时，

<i className="far fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>

它不起作用，

根据网站，

【问题讨论】：

可能是版本问题尝试从fontawesome.com/v5.15/how-to-use/on-the-web/setup/…安装npm包

标签： reactjs font-awesome

【解决方案1】：

试试这个：

<i className={`far fa-edit`} style={{fontSize:28,color:"#FC46AA"}}></i>

这可能是由于 CSS 类之间缺少空格（使用字符串模板）

【讨论】：

我想使用far fa-edit 或fas fa-edit 它不工作（fa fa-edit 工作不知道如何？），是版本问题
要么我的答案是解决你的问题，要么你的 css 是错误的。