FontAwesome 图标未出现在 typescript 文件中

Question

I have a typescript file with.tsx extension and I am using React. I am trying to display a fontawesome icon but all I get is an empty square box.

this is how I am install font-awesome using npm:

npm install --save font-awesome

this is how I import the font-awesome library in my.tsx file:

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

and this is how I am calling my icon in html code, inside the.tsx file:

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

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

The button just wouldn't come out and I have been trying for hours. Would appreciate some insights. Thanks in advance!

Answer 1

Since you are using react, maybe try doing it the react way?

 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

Then you can also use all the build in features https://fontawesome.com/how-to-use/on-the-web/using-with/react#features