打字稿文件中没有出现 FontAwesome 图标答案

【问题标题】：FontAwesome icon not appearing in typescript file打字稿文件中没有出现 FontAwesome 图标
【发布时间】：2021-07-09 05:50:37
【问题描述】：

我有一个带有 .tsx 扩展名的打字稿文件，我正在使用 React。我正在尝试显示一个 fontawesome 图标，但我得到的只是一个空方框。

这就是我使用 npm 安装 font-awesome 的方式：

npm install --save font-awesome

这就是我在 .tsx 文件中导入 font-awesome 库的方式：

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

这就是我在 .tsx 文件中的 html 代码中调用我的图标的方式：

      <div id="info">
            <i class="fas fa-angle-right"></i>

            <button class="accordion">Items</button>
       </div>

按钮就是不出来，我已经尝试了好几个小时。将不胜感激一些见解。提前致谢！

【问题讨论】：

标签： html reactjs typescript font-awesome

【解决方案1】：

既然你用的是react，或许可以试试react的方式？

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faAngleRight} />

ReactDOM.render(element, document.body)

https://fontawesome.com/how-to-use/on-the-web/using-with/react

然后您还可以使用所有内置功能 https://fontawesome.com/how-to-use/on-the-web/using-with/react#features

【讨论】：