The Hoof & Paw
DocsCategoriesTagsView the current conditions from the WolfspyreLabs WeatherstationToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeBack to homepage

Using FontAwesome Fonts with Docusaurus

One minute to read Wolf Noble   Tech   Docusaurus FontAwesome React WolfspyreLabs

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.

1
2
3
4
5
6
7
8
9

{
  "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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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

1

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

to the files we want. lets see!

So that’s proving to be a challenge.

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