Using Font Awesome within a docusaurus site
How the hell am I supposed to make this work?!
Stuff that needs changin'
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",
}
}
|
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.