Font-awesome doesn't show up icon in ReactJS

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{
    this.state = {
      breakTime: 5,
      sessionTime: 25,

    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}/>

function TimeSetter(props){
  return (
      <i className={"fas fa-arrow-up"}></i> 
      <i className={"fas fa-arrow-down"}></i>

export default App;

Screenshot 2021-11-02 222646

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

1 Like

(post deleted by author)

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

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

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

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