FontAwesome icon not appearing in typescript file

user_6053969 0
Viewed 4938

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!

font-awesome typescript reactjs html
1 Answers

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

user_28220410
Related