Help with Font awesome in a react project

JavaScript
1

I’m trying to get a font-awesome shopping cart into a navbar. I am using create-react-app and have run npm install --save font-awesome. I have a Nav.jsx component and it’s code is as follows:

import React, { Component } from 'react';

class Nav extends Component {
  render () {
    return (
      <nav className="container nav"
      >
        <ul id="navlinks">
          <li><img src="./images/apple-icon-152x152.png" alt="brand"></img> home</li>
          <li>Sale</li>
          <li>About</li>
          <li id="cart"><i className="fas fa-shopping-cart fa-3x"></i>cart</li>
        </ul>

      </nav>
    );
  }
}

export default Nav;

I import this in the App.js and it renders everything but the font awesome icon. the code for the app is the following:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Nav from './Nav';


class App extends Component {
  render() {
    return (
      <div className="App">
      <Nav />
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

I read that in order to make it work I needed to import it in the index file so I have this import in the index:

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

You can look at FortAwesome for React. It’s an React component library for font awesome.

This is the link to their explanation of it. You can either use FortAwesome or as you noted, the Web Fonts with CSS.
https://fontawesome.com/how-to-use/on-the-web/using-with/react

This blog also contains a lot of examples of how to use it.

1 Like