Extend Font Awesome and Add New Icons.

NetSuite Commerce sites use Font Awesome to provide icons on the site’s frontend. While we include a wide library of them by default, it is also possible to add our own.

1. As substitutes for text — this only applies when an icon is universally understood to mean something, eg, a magnifying glass as a icon for search
2. As reinforcements for text — for messages, such as errors, icons cause the message to stand out and become stronger; for actions, we use them with text where icons alone wouldn’t suffice
3. As visual hints — as a little nudge in the right direction; for example, if we want the user to enter a date, we can show an icon of a calendar next to the input field

If you are sure you need to add new icons, then there are two paths you can take:

1. Create your own font that includes your new icons
2. Replace the Font Awesome font with your own version so it includes your new icons

Option 1: Use Your Own Font

icomoon.in offer a number of services for free, with others available for a fee. We’re using it now because of the easy-to-use interface that makes it easy to select the ones we want before it generates a file for us.

Option 2: Modify Existing Font Awesome.

• You can use the existing Font Awesome font files in your SuiteCommerce or SuiteCommerce Advanced bundle as the basis for new ones (ie add your new icons to them)
• Depending on your version, Font Awesome font files must be replaced (SuiteCommerce Advanced Aconcagua/2018.1 or newer, and SuiteCommerce) or overridden (Kilimanjaro/2017.2 or older)
• New style declarations for your new icons must be created, which can be in new Sass files or, if you’re using SuiteCommerce or SuiteCommerce Advanced Aconcagua/2018.1 or newer, in existing theme files.

File Locations and Paths

The location of the source files depend on the version you are using.

• SuiteCommerce Advanced Kilimanjaro and Older — this will be in your source code under Modules/third_parties/font-awesome@x.x.x-custom
• SuiteCommerce Advanced Aconcagua/2018.1 and Newer, and SuiteCommerce — this will be in your theme’s source code under **Workspace/** in two places:
  • assets/font-awesome — the font files
  • Modules/font-awesome@x.x.x-custom — the Sass files

Note that @x.x.x denotes the version, which is usually 4.2.0 or 4.7.0.

As you may notice, we have implemented a custom version of Font Awesome, and we have made some arrangements within the Sass files to allow you to point a further customized version. If you look in font-awesome@x.x.x-custom/scss/_path.scss then you will find the @font-face declaration for the font, which points to #{$fa-font-custom-path}.

The value for this variable is declared in _variables.scss. This is defined like this:

$fa-font-path: getThemeAssetsPath("font-awesome");
$fa-font-custom-path: $fa-font-path;

To create a home for your new files in your theme, I would recommend going to the assets/font-awesome folder and creating a new folder called custom. Then, back in _variables.scss, I would update the Sass like this:

$fa-font-custom-path: getThemeAssetsPath("font-awesome/custom");

Another important thing to note is that each glyph is manually assigned a Unicode reference. Remember, this is a font after all, so each glyph needs to treated as if it were a character with an associated keystroke. You’ll see that each variable has a name beginning with the $fa-var- namespace and a value that begins with \f: it is very important that you maintain this consistency, while also not re-using one that may already be used.

We need variables like these because some glyphs may be used more than once in your Sass (eg some may be rotated) before the final declarations are made. The final declarations are made in _icons.scss.

The method Font Awesome uses to inject the icons is to use the :before CSS pseudo-selector, which injects the character whenever the selector is matched in your DOM, eg:

%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }

These selectors are then used as base classes, which can then be extended for your specific classes.

Create the Font Files

OK, after understanding the theory and preparing our theme, we next turn to the steps we mentioned above: ie, go to your favoured font generation service (eg IcoMoon) and upload the existing SVG version of the Font Awesome font files (fontawesome-webfont.svg). From here you can add your new glyphs and generate your font.

Before downloading your font, it is important to change the default Unicode references assigned to your new icons. Your glyphs must start with an f and not clash with existing references, so I would recommend starting with f400, f401, etc.

When you’ve changed the references, you can download the fonts. Put them into your font-awesome/custom directory, and I would make sure the file names match the originals (otherwise you will need to update the file names in the @font-face declaration).

Create the Sass

In order to use your new glyphs, you will need to first create the underlying variable and then the base class for your icon. There are two places you can do this:

1. In the existing files
2. In a new file

It’s pretty common to edit theme files directly, so you can go right ahead and edit _variables.scss and _icons.scss directly. However, some developers will prefer to keep these separate so that should they ever need to copy/move site-specific customizations (eg during a version migration) they are easy to find. In that case, you may want to create a separate module, or keep them with other site-specific customizations you have.

Regardless of how you do it, your new declarations will look something like this:

// Variable declaration
$fa-var-brandlogo: "\f400";

// Icon declaration
%#{$fa-css-prefix}-brandlogo:before { content: $fa-var-brandlogo; }

// Base class declaration
.brand-logo-icon {
    @extend .fa;
    @extend %fa-brandlogo;
}

// Example instance within my code
.header-logo-icon {
    @extend .brand-logo-icon;
    font-size: 3em;
    padding: $sc-small-margin 0;
}

The example instance is a class in my template customization, which, in this case, is a new element I’ve added to header_logo.tpl, replacing the code for my site’s logo.

<i class="header-logo-icon"></i>

Now, if we test this, it shows like this: