【问题标题】：Font Awesome icons not rendering [closed]字体真棒图标未呈现[关闭]
【发布时间】：2021-07-07 17:31:38
【问题描述】：

我正在尝试通过将它添加到我的 React 组件中来使用字体真棒 Twitter 图标，在我的本地浏览器中它工作正常，但是当我在代码笔中复制粘贴相同的代码时它不起作用，所以知道如何解决这个问题？

【问题讨论】：

您需要添加 font awesome 作为依赖项，如这里 codepen.io/fontawesome/pen/jzNBBK 只需单击 Settings -> CSS -> Add External Stylesheets/Pens
没用，我还是看不到我的 Twitter 图标，这是我的代码笔：codepen.io/Rexxzar/pen/dyNdEwZ
您好，欢迎来到 StackOverflow。你能提供一个Minimal, Reproducible Example吗？

【解决方案1】：

我已经设法使它适用于您的示例。

从此链接 (Settings -> CSS -> Add External Stylesheets/Pens) 添加 font-awesome 作为依赖项：

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css

使用这样的图标（字体真棒新语法version5）：

  <i className="fab fa-twitter"></i>
  <i className="fab fa-tumblr fa-2x"></i>

【讨论】：

【解决方案2】：

您缺少将 Font Awesome 添加为依赖项。加https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css吧。

【讨论】：

【解决方案3】：

你刚刚完成了以下方法：

第 1 步：npm install --save font-awesome

第二步：导入'font-awesome/css/font-awesome.min.css'；

第 3 步：不要忘记使用 className 作为属性

function yourcomponent() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

【讨论】：