Modifying Font Awesome Icons for SuiteCommerce Customization

Modifying Font Awesome lets developers leverage existing icons to create custom icons tailored to their specific branding needs in SuiteCommerce. This customization enhances user engagement and can improve the overall aesthetic of the website.

How Can I Modify Font Awesome?

To successfully modify Font Awesome and add new icons, follow these structured steps:

1. Create the Custom Font Folder

Begin by creating a folder for your new font called custom. The location of this folder depends on the SuiteCommerce version you are using:

• For the Kilimanjaro release of SuiteCommerce or SuiteCommerce Advanced or earlier: Modules/third_parties/font-awesome@x.x.x
• For the Aconcagua release of SuiteCommerce or SuiteCommerce Advanced or later: navigate to assets/font-awesome in your site’s theme's source code.

2. Update the Sass File

Next, update the Sass file to ensure the custom path points to where your new font files are stored. This prevents modifications to the original font files and keeps them intact for potential future use. Look for the @font-face declaration in the relevant Sass file under Modules > font-awesome > x.x.x-custom > scss/_path.scss, which initially points to #{$fa-font-custom-path}:

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

Modify this line to point towards your new fonts by changing:

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

3. Upload SVG Files

Use your preferred font-generated service to upload the existing SVG version of the Font Awesome font file to which you wish to add new icons (e.g., fontawesome-webfont.svg). The font files' location is different depending on your SuiteCommerce release:

• For Kilimanjaro: found in Modules/third_parties/font-awesome@x.x.x-custom
• For Aconcagua: located at Workspace > assets > fontawesome in your site’s theme’s source code.

4. Generate and Download the New Font

Follow the guides from the font-generating service to add your new icons and produce the font file. When downloading the new font, consider these notes:

• Ensure the Unicode references for your new icons are unique characters, with each icon paired with a specific keystroke.
• File names should ideally match the originals; if they differ, update the @font-face declaration accordingly.

5. Declare New Variables and Classes

For your new icons, create the required variables and the base class. You may opt to edit _variables.scss and _icons.scss directly or keep these changes organized in a separate module. A sample declaration for new icons might resemble:

1// Variable declaration
2$fa-var-brandlogo: "\f400";
3 
4// Icon declaration
5%#{fa-css-prefix}-brandlogo:before {content: $fa-var-brandlogo;}
6 
7// Base class declaration
8.brand-logo-icon {
9    @extend .fa;
10    @extend %fa-brandlogo;
11}
12 
13// Example usage in code
14.header-logo-icon {
15    @extend .brand-logo-icon;
16    font-size: 3em;
17    padding: $sc-small-margin 0;
18}

6. View Changes and Test Your Modifications

To see your modifications, if on a local server, simply refresh the website. For those using NetSuite, deploy changes using your developer tools. Learn more about testing SCA customizations on a local server.

Key Takeaways

• Modifying Font Awesome allows for personalized icon creation in SuiteCommerce, enhancing visual identity.
• Ensure folder paths and Sass file variables are correctly set to prevent issues.
• Keep Unicode assignments consistent to avoid overwriting existing icons.

Source: This article is based on Oracle's official NetSuite documentation.