Hugo - Integration of Font Awesome

Updated on 2022-10-19

The theme Hugo Clarity used by this site does not natively integrate Font Awesome. Here is how I integrated Font Awesome into the source of my site.

The following steps remain valid for other Hugo themes, but with adaptations.

Download the archive in zip format from the page https://fontawesome.com/download, at the time these lines are written it is fontawesome-free-6.2.0-web.zip.
Extract the zip file into a temporary directory to obtain the folder fontawesome-free-6.2.0-web/.
In the source directory of your site, create the folder static/fontawesome/css/:
```
mkdir -p static/fontawesome/css/
```
Copy the file fontawesome-free-6.2.0-web/css/all.css into static/fontawesome/css/.
In the file layouts/_default/baseof.html, add this line before the closing head tag </head>:
```
<link rel="stylesheet" type="text/css" href="{{ $baseurl }}/fontawesome/css/all.css">
```
Note: if layouts/_default/baseof.html does not exist, it needs to be copied (path layouts/_default/ included) from the theme. For my site's source this means doing:
```
mkdir -p layouts/_default
cp themes/hugo-clarity/layouts/_default/baseof.html layouts/_default/
```

To facilitate the use of Font Awesome icons I wrote a dedicated shortcode, see the following post Hugo - Shortcode for using Font Awesome icons.