Font Awesome Icon in React Footer

Question

Does anyone know how I can implement a Font Awesome social icon in my footer as I have it setup?


export const FooterItems = [
    {
        title: '',
        url: '/',
        cName: 'footer-links',
        icon: <FontAwesomeIcon icon={['fab', 'github']} size="2x"/>
    },    
    {
        title: 'View',
        url: '/view',
        cName: 'footer-links'
    },

This is obviously not working I just wanted to show what I am trying to do. Here is my footer.js file

import React from "react";
import { FooterItems } from "./FooterItems";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import './Footer.css'

class Footer extends React.Component {
    state = { clicked: false }

    handleClick = () => {
        this.setState({ clicked: !this.state.clicked })
    }

    render() {
        return (
            <footer className="FooterItems">
                <div>
                    <FontAwesomeIcon icon={['fab', 'github']} size="2x"/>
                    <FontAwesomeIcon icon={['fab', 'facebook']} size="2x"/>
                    <FontAwesomeIcon icon={['fab', 'twitter']} size="2x"/>
                    <FontAwesomeIcon icon={['fab', 'instagram']} size="2x"/>
                </div>

                <ul className={this.state.clicked ? 'footer-menu active' : 'footer-menu'}>
                    {FooterItems.map((item, index) => {
                        return (
                            <li key={index}>
                                <a className={item.cName} href={item.url}>
                                    {item.title}{item.icon}
                                </a>
                            </li>
                        )
                    })}

                </ul>
            </footer>
        )
    }
}

export default Footer

The icons are displaying here so is it easier to do it this way? If so ho would I add the Link to them here?

Does this answer your question? [Add link to Font Awesome icon in ReactJS](https://stackoverflow.com/questions/57200956/add-link-to-font-awesome-icon-in-reactjs) — Sarun UK, Oct 22 '20 at 16:03

score 0 · Answer 1 · answered Oct 22 '20 at 17:30

you should also include @fortawesome/free-brands-svg-icons (for brands), @fortawesome/free-solid-svg-icons (for solid icons),

in your package like this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

then you can put them in an a tag to link to a url:

<div>
  <a href="/////">
     <FontAwesomeIcon icon={faGithub} />
  <a>
</div>

score 0 · Answer 2 · answered Oct 22 '20 at 18:05

Referencing the FontAwesome documentation, you haven't initialized the FontAwesone app and library.

In App.js, you'll want to add the following imports and library initialization:

import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";

library.add(fab);

Here is a working example.

Font Awesome Icon in React Footer

2 Answers2