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 your own.

Broadly speaking, there are three main reasons to use an icon:

  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

There are many ways of delivering icons to a website, the evolution of which has gone from individual image files (which creates a lot of HTTP requests) to flat sprites (which cuts down on HTTP requests) to icon fonts, which is what NetSuite Commerce uses. In more recent times, people have also used SVG sprites and emoji.

Before considering introducing your own icons, make sure you check out the Font Awesome library to see if there is one that already applies (be sure to check the version that applies to the one in your code).

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

Creating a new font has the appeal of a ‘cleanness’ to it as it means you can leave our core declarations alone, but it increases the number of HTTP calls you’ll make, and we don’t have specific advice on using them within your templates (ie they are not necessarily compatible with the existing way we have implemented Font Awesome).

We will look at both, but it’s probably better to look at option 2, rather than option 1, especially if you only have one or two icons you want adding. However, if you’re delivering a customization through an extension, then you should create a separate, custom font that has your new icons in that.

Option 1: Use Your Own Font

Before beginning, it is worth pointing out that we have a separate page on adding a custom web font to your web store — you should read that first as it will contain the same mechanisms required to get this to work.

Thus the crucial information in this part is not the mechanism of delivering the font, but creating it.

The truth is, manually creating your own will be a lot of work but there are services available on the internet that can generate the fonts for us. NetSuite does not recommend any particular service, but for the purposes of this demonstration, we will look at IcoMoon (please see their terms of service before using them).

The landing page for IcoMoon

They 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.

One of the benefits of this kind of service is that it lets us upload our images, which can then be included in the new font. This may be particularly useful, for example, if you need to include a logo.

Note, however, that this service requires images to be in SVG format; therefore, if you’re using a raster graphic (eg PNG, JPG or GIF) then you will need to convert it (again there are online services for this if you don’t have the means to do it yourself).

For my example, I wanted to create a font file to show off some logos, including the NetSuite logo. I converted it into an SVG and then begun the process to create a font in IcoMoon.

After adding the logo, it appears in the list

IcoMoon then outputs a number of font files that contain your images.

From there, you’re essentially following the aforementioned steps on adding a custom web font.

Option 2: Modify Existing Font Awesome

It’s hard to know how to phrase this option: it’s not really extending Font Awesome, because you’re not necessarily doing what you do with JavaScript; you’re not replacing it because there are many constituent parts, and some can just be edited.

The summary is:

  • 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

How NetSuite Commerce Has Implemented Font Awesome

Before beginning, it is worth understanding how Font Awesome is currently declared and served from within your existing source code.

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.

For the purposes of this article, I will be referring to the 2019.2 version of these files, so some details may be different but the information is fundamentally the same

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;

In other words, by default, the custom path points to the standard path. Thus, if you want to introduce a custom version, you can update this Sass file so that the custom path points to the location of your new font files without having to make irrevocable changes to the structure of the code, and it also means you can leave the original font files in tact, should you wish to fallback to them.

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 I test this, it shows like this: