Update Font Awesome and Tabler Icons

FAQ.md

@@ -2,19 +2,22 @@
 
 Here are some frequently asked questions. If you have a different question, please check if it was not already answered in the Q&A section of the [GitHub Discussions](https://github.com/alshedivat/al-folio/discussions/categories/q-a). If not, feel free to ask a new question there.
 
-- [After I create a new repository from this template and setup the repo, I get a deployment error. Isn't the website supposed to correctly deploy automatically?](#after-i-create-a-new-repository-from-this-template-and-setup-the-repo-i-get-a-deployment-error-isnt-the-website-supposed-to-correctly-deploy-automatically)
-- [I am using a custom domain (e.g., `foo.com`). My custom domain becomes blank in the repository settings after each deployment. How do I fix that?](#i-am-using-a-custom-domain-eg-foocom-my-custom-domain-becomes-blank-in-the-repository-settings-after-each-deployment-how-do-i-fix-that)
-- [My webpage works locally. But after deploying, it fails to build and throws `Unknown tag 'toc'`. How do I fix that?](#my-webpage-works-locally-but-after-deploying-it-fails-to-build-and-throws-unknown-tag-toc-how-do-i-fix-that)
-- [My webpage works locally. But after deploying, it is not displayed correctly (CSS and JS are not loaded properly). How do I fix that?](#my-webpage-works-locally-but-after-deploying-it-is-not-displayed-correctly-css-and-js-are-not-loaded-properly-how-do-i-fix-that)
-- [Atom feed doesn't work. Why?](#atom-feed-doesnt-work-why)
-- [My site doesn't work when I enable `related_blog_posts`. Why?](#my-site-doesnt-work-when-i-enable-related_blog_posts-why)
-- [When trying to deploy, it's asking for github login credentials, which github disabled password authentication and it exits with an error. How to fix?](#when-trying-to-deploy-its-asking-for-github-login-credentials-which-github-disabled-password-authentication-and-it-exits-with-an-error-how-to-fix)
-- [When I manually run the Lighthouse Badger workflow, it fails with `Error: Input required and not supplied: token`. How do I fix that?](#when-i-manually-run-the-lighthouse-badger-workflow-it-fails-with-error-input-required-and-not-supplied-token-how-do-i-fix-that)
-- [My code runs fine locally, but when I create a commit and submit it, it fails with `prettier code formatter workflow run failed for main branch`. How do I fix that?](#my-code-runs-fine-locally-but-when-i-create-a-commit-and-submit-it-it-fails-with-prettier-code-formatter-workflow-run-failed-for-main-branch-how-do-i-fix-that)
-- [After I update my site with some new content, even a small change, the GitHub action throws an error or displays a warning. What happened?](#after-i-update-my-site-with-some-new-content-even-a-small-change-the-github-action-throws-an-error-or-displays-a-warning-what-happened)
-- [I am trying to deploy my site, but it fails with `Could not find gem 'jekyll-diagrams' in locally installed gems`. How do I fix that?](#i-am-trying-to-deploy-my-site-but-it-fails-with-could-not-find-gem-jekyll-diagrams-in-locally-installed-gems-how-do-i-fix-that)
-- [How can I update Font Awesome version on the template](#how-can-i-update-font-awesome-version-on-the-template)
-- [What do all these GitHub actions/workflows mean?](#what-do-all-these-github-actionsworkflows-mean)
+- [Frequently Asked Questions](#frequently-asked-questions)
+  - [After I create a new repository from this template and setup the repo, I get a deployment error. Isn't the website supposed to correctly deploy automatically?](#after-i-create-a-new-repository-from-this-template-and-setup-the-repo-i-get-a-deployment-error-isnt-the-website-supposed-to-correctly-deploy-automatically)
+  - [I am using a custom domain (e.g., `foo.com`). My custom domain becomes blank in the repository settings after each deployment. How do I fix that?](#i-am-using-a-custom-domain-eg-foocom-my-custom-domain-becomes-blank-in-the-repository-settings-after-each-deployment-how-do-i-fix-that)
+  - [My webpage works locally. But after deploying, it fails to build and throws `Unknown tag 'toc'`. How do I fix that?](#my-webpage-works-locally-but-after-deploying-it-fails-to-build-and-throws-unknown-tag-toc-how-do-i-fix-that)
+  - [My webpage works locally. But after deploying, it is not displayed correctly (CSS and JS are not loaded properly). How do I fix that?](#my-webpage-works-locally-but-after-deploying-it-is-not-displayed-correctly-css-and-js-are-not-loaded-properly-how-do-i-fix-that)
+  - [Atom feed doesn't work. Why?](#atom-feed-doesnt-work-why)
+  - [My site doesn't work when I enable `related_blog_posts`. Why?](#my-site-doesnt-work-when-i-enable-related_blog_posts-why)
+  - [When trying to deploy, it's asking for github login credentials, which github disabled password authentication and it exits with an error. How to fix?](#when-trying-to-deploy-its-asking-for-github-login-credentials-which-github-disabled-password-authentication-and-it-exits-with-an-error-how-to-fix)
+  - [When I manually run the Lighthouse Badger workflow, it fails with `Error: Input required and not supplied: token`. How do I fix that?](#when-i-manually-run-the-lighthouse-badger-workflow-it-fails-with-error-input-required-and-not-supplied-token-how-do-i-fix-that)
+  - [My code runs fine locally, but when I create a commit and submit it, it fails with `prettier code formatter workflow run failed for main branch`. How do I fix that?](#my-code-runs-fine-locally-but-when-i-create-a-commit-and-submit-it-it-fails-with-prettier-code-formatter-workflow-run-failed-for-main-branch-how-do-i-fix-that)
+  - [After I update my site with some new content, even a small change, the GitHub action throws an error or displays a warning. What happened?](#after-i-update-my-site-with-some-new-content-even-a-small-change-the-github-action-throws-an-error-or-displays-a-warning-what-happened)
+  - [I am trying to deploy my site, but it fails with `Could not find gem 'jekyll-diagrams' in locally installed gems`. How do I fix that?](#i-am-trying-to-deploy-my-site-but-it-fails-with-could-not-find-gem-jekyll-diagrams-in-locally-installed-gems-how-do-i-fix-that)
+  - [How can I update Academicons version on the template](#how-can-i-update-academicons-version-on-the-template)
+  - [How can I update Font Awesome version on the template](#how-can-i-update-font-awesome-version-on-the-template)
+  - [How can I update Tabler Icons version on the template](#how-can-i-update-tabler-icons-version-on-the-template)
+  - [What do all these GitHub actions/workflows mean?](#what-do-all-these-github-actionsworkflows-mean)
 
 ---
 
@@ -115,12 +118,24 @@ Note that libraries tend to be deprecated and support for them dropped as they a
 
 ---
 
+### How can I update Academicons version on the template
+
+To update the Academicons version, you need to download the latest release from the [Academicons website](https://jpswalsh.github.io/academicons/). After downloading, extract the zip file and copy the files `academicons.ttf` and `academicons.woff` from the `fonts/` directory to `assets/fonts/` and the file `academicons.min.css` from the `css/` directory to `assets/css/`.
+
+---
+
 ### How can I update Font Awesome version on the template
 
 To update the Font Awesome version, you need to download the latest release "for the web" from the [Font Awesome website](https://fontawesome.com/download). After downloading, extract the zip file and copy the `scss/` directory content to `_sass/font-awesome/` and the `webfonts/` content to `assets/webfonts/`.
 
 ---
 
+### How can I update Tabler Icons version on the template
+
+To update the Tabler Icons version, you need to download the latest release from the [Tabler Icons website](https://tabler.io/icons). After downloading, extract the zip file and copy the files `tabler-icons-filled.scss`, `tabler-icons-outline.scss`, and `tabler-icons.scss` from the `webfont/` directory to `_sass/tabler-icons/`, and all the files from `webfont/fonts/` to `assets/fonts/`.
+
+---
+
 ### What do all these GitHub actions/workflows mean?
 
 GitHub actions are a way to automate tasks in the repository. They are defined in `.github/workflows/` directory. Each file in this directory is a workflow. Workflows are made up of one or more jobs, and each job runs on a virtual machine hosted by GitHub. You can see the status of the workflows in the `Actions` tab of your repository. For more information, check the [GitHub Actions documentation](https://docs.github.com/en/actions).

_sass/font-awesome/_core.scss

@@ -6,14 +6,12 @@
   font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
 }
 
-.#{$fa-css-prefix}-solid,
-.#{$fa-css-prefix}-regular,
-.#{$fa-css-prefix}-brands,
 .fas,
 .far,
 .fab,
-.#{$fa-css-prefix}-sharp-solid,
-.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-solid,
+.#{$fa-css-prefix}-regular,
+.#{$fa-css-prefix}-brands,
 .#{$fa-css-prefix} {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -24,20 +22,28 @@
   text-rendering: auto;
 }
 
-.fas,
+.fas::before,
+.far::before,
+.fab::before,
+.#{$fa-css-prefix}-solid::before,
+.#{$fa-css-prefix}-regular::before,
+.#{$fa-css-prefix}-brands::before,
+.fa::before {
+  content: var(#{$fa-icon-property});
+}
+
 .#{$fa-css-prefix}-classic,
+.fas,
 .#{$fa-css-prefix}-solid,
 .far,
 .#{$fa-css-prefix}-regular {
   font-family: 'Font Awesome 6 Free';
 }
-
-.fab,
-.#{$fa-css-prefix}-brands {
+.#{$fa-css-prefix}-brands,
+.fab {
   font-family: 'Font Awesome 6 Brands';
 }
 
-
 %fa-icon {
   @include fa-icon;
 }

_sass/font-awesome/_icons.scss

@@ -5,6 +5,9 @@
 readers do not read off random characters that represent icons */
 
 @each $name, $icon in $fa-icons {
-  .#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); }
+  .#{$fa-css-prefix}-#{$name} {
+    #{$fa-icon-property}: unquote("\"#{ $icon }\"");
+    #{$fa-duotone-icon-property}: unquote("\"#{$icon}#{$icon}\"");
+  }
 }
 

_sass/font-awesome/_mixins.scss

@@ -42,31 +42,24 @@
 }
 
 // sets a specific icon family to use alongside style + icon mixins
+@mixin fa-family-classic() {
+  @extend .fa-classic;
+}
 
 // convenience mixins for declaring pseudo-elements by CSS variable,
-// including all style-specific font properties, and both the ::before
-// and ::after elements in the duotone case.
+// including all style-specific font properties
 @mixin fa-icon-solid($fa-var) {
-  @extend %fa-icon;
   @extend .fa-solid;
 
-  &::before {
-    content: unquote("\"#{ $fa-var }\"");
-  }
+  & { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
 }
 @mixin fa-icon-regular($fa-var) {
-  @extend %fa-icon;
   @extend .fa-regular;
 
-  &::before {
-    content: unquote("\"#{ $fa-var }\"");
-  }
+  & { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
 }
 @mixin fa-icon-brands($fa-var) {
-  @extend %fa-icon;
   @extend .fa-brands;
 
-  &::before {
-    content: unquote("\"#{ $fa-var }\"");
-  }
+  & { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
 }