chore(recipe):Add a recipe for using FontAwesome (#21275)

* Recipe for using fontawesome

* Update docs/docs/recipes/styling-css.md

Co-Authored-By: Marcy Sutton <[email protected]>

* Update docs/docs/recipes/styling-css.md

Co-Authored-By: Marcy Sutton <[email protected]>

* Update docs/docs/recipes/styling-css.md

Co-Authored-By: Marcy Sutton <[email protected]>

* Update docs/docs/recipes/styling-css.md

Co-Authored-By: Marcy Sutton <[email protected]>

* Update docs/docs/recipes/styling-css.md

Co-Authored-By: Marcy Sutton <[email protected]>

* Address review comments

* Break FontAwesome into two words

Co-authored-by: Marcy Sutton <[email protected]>
Co-authored-by: Aisha Blake <[email protected]>
Co-authored-by: GatsbyJS Bot <[email protected]>

Author: 4 people

docs/docs/recipes.md

@@ -53,6 +53,7 @@ There are so many ways to add styles to your website; Gatsby supports almost eve
 - [Adding a Local Font](/docs/recipes/styling-css#adding-a-local-font)
 - [Using Emotion](/docs/recipes/styling-css#using-emotion)
 - [Using Google Fonts](/docs/recipes/styling-css#using-google-fonts)
+- [Using Font Awesome](/docs/recipes/styling-css#using-fontawesome)
 
 ## [3. Working with starters](/docs/recipes/working-with-starters)
 

docs/docs/recipes/styling-css.md

@@ -416,3 +416,44 @@ _NOTE: So for the above example, the relevant CSS declaration would be `font-fam
 - [Typography.js](/docs/typography-js/) - Another option for using Google fonts on a Gatsby site
 - [The Typefaces Project Docs](https://github.com/KyleAMathews/typefaces/blob/master/README.md)
 - [Live example on Kyle Mathews' blog](https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/)
+
+## Using Font Awesome
+
+Using [Font Awesome](https://fontawesome.com/) gives you access to thousands of icons for use on your site. Since Gatsby sites are React sites, it's recommended to use the [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) SVG library.
+
+### Prerequisites
+
+- The [Gatsby CLI](/docs/gatsby-cli/) installed
+- A [Gatsby site](/docs/quick-start)
+
+### Directions
+
+1. Install the `react-fontawesome` dependencies.
+
+```shell
+npm install @fortawesome/fontawesome-svg-core  @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome
+```
+
+> Note that there are multiple icon libraries within `react-fontawesome`. You may also be interested in `free-regular-svg-icons` and `free-solid-svg-icons` which you would install the same way.
+
+2. Import the `FontAwesomeIcon` component and the icon you want to use. Then use the icon as a component directly in your JSX files:
+
+```jsx:title=index.js
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faReact } from "@fortawesome/free-brands-svg-icons"
+
+const IndexPage = () => (
+  <Layout>
+    <FontAwesomeIcon icon={faReact} /> //highlight-line
+  </Layout>
+)
+
+export default IndexPage
+```
+
+> This example imports a single, specific icon and uses it for improved performance. As an alternative, you can [import the icons and build a library](https://github.com/FortAwesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently).
+
+### Additional resources
+
+- [Font Awesome](https://fontawesome.com/)
+- [react-fontawesome](https://github.com/FortAwesome/react-fontawesome)