Swap all use of FontAwesome to the v5+ syntax and set all icons to be fa-solid. (#887)

### Prerequisites

Put an `x` into the box(es) that apply:

- [ ] This pull request fixes a bug.
- [ ] This pull request adds a feature.
- [ ] This pull request introduces breaking change.

### Description

This change is the second half of #882, designed to remove use of the v4
syntax from the codebase.

This is not removing the v4 shims as users may require it for their own
content, but we don't need the template to rely on the old syntax!

PLEASE NOTE: There are minor visible changes here by explicitly setting
a consistent font choice. The default fa-solid calendar icon has no
little squares where the days should be (but fa-calendar-days does, so
we could always swap back) and the default clock is solid (forkawesome
only had a hollow clock called clock-o).


![before-after](https://github.com/luizdepra/hugo-coder/assets/3343403/a2f95d34-3d7a-49e9-92c2-26f685bff601)

### Issues Resolved

I promised this cleanup in #858 

### Checklist

Put an `x` into the box(es) that apply:

#### General

- [x] Describe what changes are being made
- [x] Explain why and how the changes were necessary and implemented
respectively
- [x] Reference issue with `#<ISSUE_NO>` if applicable

#### Resources

- [ ] If you have changed any SCSS code, run `make release` to
regenerate all CSS files

#### Contributors

- [x] Add yourself to `CONTRIBUTORS.md` if you aren't on it already

Co-authored-by: Luiz F. A. de Prá <luizdepra@users.noreply.github.com>

docs/configurations.md

@@ -140,7 +140,7 @@ Social Icons are optional. To use them you will need to set at least all the fol
 | Configuration  | Type   | Required | Description                              | Example                         |
 | -------------- | ------ | -------- | ---------------------------------------- | ------------------------------- |
 | name           | string | Yes      | Icon name.                               | `"Github"`                      |
-| icon           | string | Yes      | FontAwesome icon classes.                | `"fa fa-github"`                |
+| icon           | string | Yes      | FontAwesome icon classes.                | `"fa-brands fa-github"`         |
 | weight         | int    | Yes      | Icon order.                              | `1`                             |
 | url            | string | Yes      | URL to redirect.                         | `"https://github.com/johndoe/"` |
 
@@ -149,17 +149,17 @@ An example:
 ```toml
 [[params.social]]
   name = "Github"
-  icon = "fa fa-github fa-2x"
+  icon = "fa-brands fa-github fa-2x"
   weight = 1
   url = "https://github.com/johndoe/"
 [[params.social]]
   name = "Gitlab"
-  icon = "fa fa-gitlab fa-2x"
+  icon = "fa-brands fa-gitlab fa-2x"
   weight = 2
   url = "https://gitlab.com/johndoe/"
 [[params.social]]
   name = "Twitter"
-  icon = "fa fa-twitter fa-2x"
+  icon = "fa-brands fa-twitter fa-2x"
   weight = 3
   url = "https://twitter.com/johndoe/"
 ```
@@ -286,17 +286,17 @@ style = "github-dark"
 # Social links
 [[params.social]]
   name = "Github"
-  icon = "fa fa-github fa-2x"
+  icon = "fa-brands fa-github fa-2x"
   weight = 1
   url = "https://github.com/johndoe/"
 [[params.social]]
   name = "Gitlab"
-  icon = "fa fa-gitlab fa-2x"
+  icon = "fa-brands fa-gitlab fa-2x"
   weight = 2
   url = "https://gitlab.com/johndoe/"
 [[params.social]]
   name = "Twitter"
-  icon = "fa fa-twitter fa-2x"
+  icon = "fa-brands fa-twitter fa-2x"
   weight = 3
   url = "https://twitter.com/johndoe/"
 

exampleSite/config.toml

@@ -129,37 +129,37 @@ author = "authors"
 
 [[params.social]]
 name = "Github"
-icon = "fa fa-2x fa-github"
+icon = "fa-brands fa-github fa-2x"
 weight = 1
 url = "https://github.com/johndoe/"
 
 [[params.social]]
 name = "Gitlab"
-icon = "fa fa-2x fa-gitlab"
+icon = "fa-brands fa-gitlab fa-2x"
 weight = 2
 url = "https://gitlab.com/johndoe/"
 
 [[params.social]]
 name = "Twitter"
-icon = "fa fa-2x fa-twitter"
+icon = "fa-brands fa-twitter fa-2x"
 weight = 3
 url = "https://twitter.com/johndoe/"
 
 [[params.social]]
 name = "LinkedIn"
-icon = "fa fa-2x fa-linkedin"
+icon = "fa-brands fa-linkedin fa-2x"
 weight = 4
 url = "https://www.linkedin.com/in/johndoe/"
 
 [[params.social]]
 name = "Medium"
-icon = "fa fa-2x fa-medium"
+icon = "fa-brands fa-medium fa-2x"
 weight = 5
 url = "https://medium.com/@johndoe"
 
 [[params.social]]
 name = "RSS"
-icon = "fa fa-2x fa-rss"
+icon = "fa-solid fa-rss fa-2x"
 weight = 6
 url = "https://myhugosite.com/index.xml"
 rel = "alternate"

layouts/_default/_markup/render-heading.html

@@ -1,7 +1,7 @@
 <h{{ .Level }} id="{{ .Anchor | safeURL }}">
   {{ .Text | safeHTML }}
   <a class="heading-link" href="#{{ .Anchor | safeURL }}">
-    <i class="fa fa-link" aria-hidden="true" title="{{ i18n "link_to_heading" | default "Link to heading" }}"></i>
+    <i class="fa-solid fa-link" aria-hidden="true" title="{{ i18n "link_to_heading" | default "Link to heading" }}"></i>
     <span class="sr-only">{{ i18n "link_to_heading" | default "Link to heading" }}</span>
   </a>
 </h{{ .Level }}>

layouts/partials/float.html

@@ -1,7 +1,7 @@
 {{ if not .Site.Params.hideColorSchemeToggle }}
 <div class="float-container">
     <a id="dark-mode-toggle" class="colorscheme-toggle">
-        <i class="fa fa-adjust fa-fw" aria-hidden="true"></i>
+        <i class="fa-solid fa-adjust fa-fw" aria-hidden="true"></i>
     </a>
 </div>
 {{ end }}

layouts/partials/header.html

@@ -6,7 +6,7 @@
     {{ if or .Site.Menus.main .Site.IsMultiLingual }}
       <input type="checkbox" id="menu-toggle" />
       <label class="menu-button float-right" for="menu-toggle">
-        <i class="fa fa-bars fa-fw" aria-hidden="true"></i>
+        <i class="fa-solid fa-bars fa-fw" aria-hidden="true"></i>
       </label>
       <ul class="navigation-list">
         {{ with .Site.Menus.main}}

layouts/partials/posts/series.html

@@ -8,7 +8,7 @@
       <h3 id="{{ i18n "see_also" | default "See also in" | anchorize }}-{{ anchorize . | safeURL }}">
         {{ i18n "see_also" | default "See also in" }} {{ . }}
         <a class="heading-link" href="#{{ i18n "see_also" | default "See also in" | anchorize }}-{{ anchorize . | safeURL }}">
-          <i class="fa fa-link" aria-hidden="true" title="{{ i18n "link_to_heading" | default "Link to heading" }}"></i>
+          <i class="fa-solid fa-link" aria-hidden="true" title="{{ i18n "link_to_heading" | default "Link to heading" }}"></i>
           <span class="sr-only">{{ i18n "link_to_heading" | default "Link to heading" }}</span>
         </a>
       </h3>

layouts/partials/taxonomy/authors.html

@@ -1,5 +1,5 @@
 <div class="authors">
-  <i class="fa fa-user" aria-hidden="true"></i>
+  <i class="fa-solid fa-user" aria-hidden="true"></i>
   {{- range $index, $el := . -}}
     {{- if gt $index 0 }}
       <span class="separator">•</span>

layouts/partials/taxonomy/categories.html

@@ -1,5 +1,5 @@
 <div class="categories">
-  <i class="fa fa-folder" aria-hidden="true"></i>
+  <i class="fa-solid fa-folder" aria-hidden="true"></i>
   {{- range $index, $el := . -}}
     {{- if gt $index 0 }}
       <span class="separator">•</span>

layouts/partials/taxonomy/tags.html

@@ -1,5 +1,5 @@
 <div class="tags">
-  <i class="fa fa-tag" aria-hidden="true"></i>
+  <i class="fa-solid fa-tag" aria-hidden="true"></i>
   {{- range $index, $el := . -}}
     {{- if gt $index 0 }}
       <span class="separator">•</span>

layouts/posts/single.html

@@ -15,13 +15,13 @@
         <div class="post-meta">
           <div class="date">
             <span class="posted-on">
-              <i class="fa fa-calendar" aria-hidden="true"></i>
+              <i class="fa-solid fa-calendar" aria-hidden="true"></i>
               <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
                 {{ .Date | time.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}
               </time>
             </span>
             <span class="reading-time">
-              <i class="fa fa-clock-o" aria-hidden="true"></i>
+              <i class="fa-solid fa-clock" aria-hidden="true"></i>
               {{ i18n "reading_time" .ReadingTime }}
             </span>
           </div>

layouts/shortcodes/notice.html

@@ -1,10 +1,10 @@
 {{- $type := .Get 0 -}}
 {{- $title := .Get 1 | default $type -}}
 {{- $inner := .Inner | .Page.RenderString | chomp -}}
-{{- $icon := dict "note" "fa-sticky-note" "tip" "fa-lightbulb-o" "example" "fa-file-text" "question" "fa-question" "info" "fa-exclamation-circle" "warning" "fa-exclamation-triangle" "error" "fa-times-circle" -}}
+{{- $icon := dict "note" "fa-sticky-note" "tip" "fa-lightbulb" "example" "fa-file-text" "question" "fa-question" "info" "fa-exclamation-circle" "warning" "fa-exclamation-triangle" "error" "fa-times-circle" -}}
 <div class="notice {{ $type }}">
   <div class="notice-title">
-    <i class="fa {{ index $icon $type }}" aria-hidden="true"></i>{{ i18n $title | default $title | humanize }}
+    <i class="fa-solid {{ index $icon $type }}" aria-hidden="true"></i>{{ i18n $title | default $title | humanize }}
   </div>
   <div class="notice-content">
     {{- $inner -}}