React-fontawesome: Icons not Working

[ihpannu]

Only the icons showed in the examples work. I wanted to use copyrights icon and some other ones none of those worked. Just the brand names icons works.

[robmadole]

@iharmanpannu have you added the additional icons to the library with fontawesome.library.add?

[sant123]

Try this

import React from "react";
import FontAwesomeIcon from "@fortawesome/react-fontawesome"
import * as Icons from "@fortawesome/fontawesome-free-solid"

export default class HomeComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = { greeting: "Hello world :)" };
  }

  render() {
    return (
      <div>
        <p>{this.state.greeting}</p>
        <FontAwesomeIcon icon={Icons.faCopyright} size="6x" />
      </div>
    );
  }
}

[ihpannu]

@sant123 It worked thanks. Another question what If I want to add any other icon will this method work?

[ihpannu]

I tried it works thanks again @sant123

[gregorypothier]

thanks @sant123 this worked for me as well with brands:

import * as Brands from '@fortawesome/free-brands-svg-icons';

[jtla3]

I am having the same issue and nothing stated above works. Can someone help?

import React from 'react';
import { Link } from 'react-router-dom';

// import Styles
import './header.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import * as Icons from '@fortawesome/fontawesome-free-solid';

const Header = () => {

    //  Function for logo bars
    const navBars = () => (
        <div className="bars">
            <FontAwesomeIcon icon={Icons.faBars}/>
        </div>
    )

    // Function to return logo
    const logo = () => (
            <Link to="/" className="logo">
                <img src="/images/nba_logo.png" alt="nba logo"/>
            </Link>
    )


    return (
        <header className="header-layout">
            <div className="header-div">
                {navBars()}
                {logo()}
            </div>
        </header>
    );
};

export default Header;

Error message
./src/components/Header/header.js
Attempted import error: '@fortawesome/react-fontawesome' does not contain a default export (imported as 'FontAwesomeIcon').

[oliakuzyura]

@jtla3 Have you find the answer?

[RanaAlqrenawi]

@jtla3 @oliakuzyura I had the same issue just this afternoon and it's simply sorted by replacing the import statement you have by this one: _import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";_

So, it's just making sure to keep the FontAwesomeIcon between {}.

[ivandosreisandrade]

This solution worked for me, but I also had to install a missing dependency
npm i --save @fortawesome/fontawesome-svg-core

Many thanks

@jtla3 @oliakuzyura I had the same issue just this afternoon and it's simply sorted by replacing the import statement you have by this one: _import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";_

So, it's just making sure to keep the FontAwesomeIcon between {}.