Extending Font Awesome

Font Awesome is a web font included with your Commerce site, which provides a library of icons that you can use on your site. Typically, icons are used as a substitute for text, as a reinforcement for text, and to provide visual hints. For instance, you may want to include an icon with error messages to make it stand out. By default, Font Awesome includes a large library of icons, however it is possible to add your own.

To add your own icons, there are two approaches you can take:

If you are delivering a customization through an extension, you can create a custom font that includes your new icons. How you create a new icon font depends on the third-party service you are using. After you have uploaded your icons and created your new font, follow the steps outlined in Adding a Custom Web Font.
If you are adding only a few icons, you can replace Font Awesome with your own version that includes your new icons. For more information, see Modifying Font Awesome.

Note:

If you are using the Aconcagua release of SuiteCommerce or SuiteCommerce Advanced or later, Font Awesome font files must be replaced. If you are using the Kilimanjaro release of SuiteCommerce or SuiteCommerce Advanced or earlier, Font Awesome files must be overridden.

Modifying Font Awesome

This section details how you can use the existing Font Awesome font as a basis for a new font, which includes your new icons.

Note:

Before adding your own icons, check the Font Awesome Library to see if there is already an icon that applies. Be sure to check the version that applies to the version in your code.

To modify Font Awesome:

Create a folder for your new font called custom. The location of the folder depends on which version you are using.
- If you are using the Kilimanjaro release of SuiteCommerce or SuiteCommerce Advanced or earlier, go to Modules/third_parties/font-awesome@x.x.x.
- If you are using the Aconcagua release of SuiteCommerce or SuiteCommerce Advanced or later, in your site's theme's source code, go to assets/font-awesome.
Update the Sass file so the custom path points to the location of your new font files. By pointing to the location of your new font files, you avoid changing the structure of the code. This keeps the original font files in case you need them.

In your site's theme's source code under Modules > font-awesome > x.x.x-custom > scss/_path.scs, find the @font-face declaration for the font that points to #{$fa-font-custom-path}. The value for this variable is declared in _variables.scss and is defined as follows:
```
                $fa-font-path: getThemeAssetsPath("font-awesome");
$fa-font-custom-path: $fa-font-path; 

              
```
Update this path to point to your new font folder.
```
                $fa-font-path: getThemeAssetsPath("font-awesome/custom"); 

              
```
Go to the font generating service of your choice. Upload the existing SVG version of the Font Awesome font file you want to add your new icons to. For example, fontawesome-webfont.svg. The location of the font file depends on which version you are using.
- If you are using the Kilimanjaro release of SuiteCommerce or SuiteCommerce Advanced or earlier, the font files are found in your source code under Modules/third_parties/font-awesome@x.x.x-custom.
- If you are using the Aconcagua release of SuiteCommerce or SuiteCommerce Advanced or later, the font files are found in your site's theme's source code under Workspace > assets > fontawesome.
Follow the steps of the font generating service to add your new icons to the file and generate your font.
Download your new font into your custom folder. Before downloading, keep the following in mind:
- Change the default Unicode references assigned to your new icons. Each icon needs to be treated as its own character with an associated keystroke. Each variable has a name beginning with $fa-var- and a value that begins with \f. It is important to maintain this consistency without overwriting existing unicode references.
- If required, make sure the file names match the originals. If they do not match, you must update the file names in the @font-face declaration.

Create the underlying variables and the base class for your new icons.

You can directly edit _variables.scss and _icons.scss, or you can keep them separate. If you choose to keep your new icons separate, you may want to create a separate module or keep them with other site-specific customizations. Whichever way you choose, your new declarations will look similar to the example below.

                //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;

}

View your changes.

If you are running a local server, you can view your changes by reloading your website. See Test SCA Customizations on a Local Server for more information.

If you are viewing your site in NetSuite, you can deploy your changes using the developer tools. See Deploy SCA Customizations to NetSuite for more information.

Modifying Font Awesome

To modify Font Awesome:

Related Topics