Font-awesome doesn't show up icon in ReactJS

JavaScript
1

I’m building a reactjs project, I have installed font-awesome in npm and imported font-awesome to my project, but when i run, it showed up a square icon instead of correct icon. Please help me solve this. Sorry for bad english.

My code:

import './App.css';
import React from 'react';
import 'font-awesome/css/font-awesome.min.css';


class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      breakTime: 5,
      sessionTime: 25,
    };
  }

  render(){
    return (
      <div id = {"root"}>
        <div className = {"title"}>Study Timer</div>
        <TimeSetter onClick = {this.changeBreakTime} text={"Break Length"} time = {this.state.breakTime}/>
        <TimeSetter onClick = {this.changeSessionTime} text={"Session Length"} time = {this.state.sessionTime}/>
      </div>
    );
  }
}

function TimeSetter(props){
  return (
    <div>
      <div>{props.text}</div>
      <i className={"fas fa-arrow-up"}></i> 
      <span>{props.time}</span>
      <i className={"fas fa-arrow-down"}></i>
    </div>
  );
}

export default App;

result:
Screenshot 2021-11-02 222646

2

try downloading it then include it to your project rather an npm. I also use this method and it worked

1 Like
3

(post deleted by author)

4

Thank you, but it’s not working for me.

5

you downloaded the fonts using npm right try grapping a .zip file then extract it into your /src/assets/fonts dir. After that import it like so:

import "./assets/fonts/fontawesome-all.min.css"
1 Like
6

Thank you, i have tried but it didn’t work for me. I tried installing react-fontawesome and it working

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.