Loading more fonts from FontAwesome

[SimpleAnecdote]

Hi! I'm just playing around with Hugo for the first time, found your awesome theme and started using it so first of all a huge thank you! I'll be sure to do a PR for USERS.md if and when I actually deploy it. I apologise if this is a stupid question, but I'm totally new to Hugo and I've been wondering about the FontAwesome icons specifically in your theme.

So in my content I'd like to use icons (already wrote a shortcode for it) from Font Awesome. Since Font Awesome is already used in the theme, I figured this would be easy but quickly found most of the icons I've been trying to use show up as non-existent. So I've delved into the code and found the following:
In the current architecture you're using npm to manage FA and then you're building a specific list of required icons via ./src/js/fonts.js. This is why any icon I've been trying to use which is not included does not load. In this scenario how would you go about extending the list of icons which can be used?

I thought of the following:

1. I can create a specific FA kit of my own and add it via customCSS?
   If that's so, I'm not sure of the format this field's value accepts. I know it's an array, but not sure of the values themselves.
2. I can overwrite ./src/js/fonts.js in my implementation and add them manually?
   I tried this out and it didn't work for me for some reason.
   Also, would I need to duplicate the theme's fonts.js and modify it (seems poor) or I can extend it by using the import {...} from and library.add(...) in a custom JS file with just the extra icons I require?
3. I can use load the entire FontAwesome from a CDN which I think is similar to option 1, just not in loading times ;P

Would you care to comment which is the preferred way to add availability of other FA icons? I'd bet the preferred way is different than any I've listed here (or maybe you think adding FA icons to the content should not be coupled with the code at all and definitely should be loaded a different way) ;P

[razonyang]

Yep, we're using a custom Awesome Font icons set, defined in ./src/js/fonts.js, in order to reduce the file size of icons, because we don't need all the icons that Awesome Font provided. And it also gives users the option to choose other icons.

There are two ways to do it:

CustomJS

Since the theme using JS+SVG framework to replace all the Awesome Font to SVG, so the CustomCSS won't work. For example:

customJS = [
  "https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/all.min.js" # Full icons set.
  # "https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/solid.js" # Solid icons.
  # ...
]

You can also download the JS files and put it in the static directory(assumed the directory is static/js):

customJS = [
  "/js/all.min.js" # Full icons set.
  # "/js/solid.js" # Solid icons.
  # ...
]

Custom build

This is a hard way if you're unfamiliar to the frontend development.
You can set up a build environment like the theme did, and then add the needed icons and save it as assets/js/custom.js.

Here are the key instructions:

npm init
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons terser-webpack-plugin webpack webpack-cli

// webpack.config.js
const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: {
    custom: './src/js/custom.js',
  },
  mode: 'production',
  optimization: {
    usedExports: true,
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  output: {
    path: path.resolve(path.join(__dirname, 'assets', 'js')),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ['babel-loader', 'ts-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js', 'jsx' ],
  },
};

// src/js/custom.js
import { library, dom, config } from '@fortawesome/fontawesome-svg-core';
import { faGlobe, faClock } from '@fortawesome/free-solid-svg-icons';

config.searchPseudoElements = true;

library.add(faGlobe, faClock); // Add icons that you need.

document.addEventListener('DOMContentLoaded', () => {
  dom.watch();
});

// package.json
{
  "scripts": {
    "build": "webpack"
  }
}

Finally, You'll need to run the command npm run build to build the JS file.

Conclusion

• The former is the simplest way
• The latter allows importing the icons that you need, instead of importing a large icon set.

[SimpleAnecdote]

Thank you so much for the quick and detailed reply!
I opted for the for the customJS in params.toml (via CDN) for the moment as my icon usage as an author seems to be somewhat high. With that being the case it raises the question of manually updating the JS everytime I use a new icon in a post and that seems less than optimal to me. I really appreciate the code samples!