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

Posted 2023-02-21

【中文标题】打字稿文件中没有出现 FontAwesome 图标

【英文标题】：FontAwesome icon not appearing in typescript file

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

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

【参考方案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