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

Posted 2023-02-21

【中文标题】在 className 属性中反应字体真棒无法正常工作

【英文标题】：react font awesome not working correctly in className property

【发布时间】：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包

【参考方案1】：

试试这个：

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

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

【讨论】：

我想使用far fa-edit 或fas fa-edit 它不工作（fa fa-edit 工作不知道如何？），是版本问题

要么我的答案是解决你的问题，要么你的 css 是错误的。