Using FontAwesome Fonts with Docusaurus

Using Font Awesome within a docusaurus site #

How the hell am I supposed to make this work?! #

Stuff that needs changin' #

package.json #

So first thing, package.json needs to be informed of the new dependencies.

{
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
  }
}

index.js #

Next, it seems we have to include the stuffs we need in index.js of our site

import React from 'react';
import ReactDOM from 'react-dom';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
library.add(fab, faCheckSquare, faCoffee);

and then we should be able to add

 <FontAwesomeIcon icon={['fab', 'apple']} />

to the files we want. lets see!## Getting icons in the footer

So that’s proving to be a challenge.

Font Awesome’s documentation on CSS Pseudo elements came to the rescue here.