Add Icons to the Nav

Plugin
Written By LAZ-I
Contents

This guide will help you add custom icons to your website's navigation, cart, and login using a simple JavaScript file. You can configure it without knowing much about JavaScript. Just follow these steps!


Starter Setup

This is a quick setup that will insert the icons and use the navigation default size and color, and apply the same settings to mobile navigation.

Copy this code and paste it into the code injection header area: Pages >Website Tools > Code Injection. 

<!-- GOOGLE ICONS REPLACE WITH CUSTOM GOOGLE  -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>

<!-- LAZ-I.COM NAV ICONS -->
<link rel="stylesheet" href="https://lizasem.com/laz-i/nav-icons/style.css"/>  
<script src="https://lizasem.com/laz-i/nav-icons/script.min.js"></script>

<script>
const googleIconConfig = {
    display: "left",  // Where to display the icon: right, left, above, below, false (to hide)
    iconStyle: "outlined",  // Icon style: outlined, sharp, rounded, default (outlined is default)
    color: "default",  // Icon color: "default" or a HEX code like "#FF5733"
    iconSize: "default",  // Icon size: "default" or a specific size like "1.4rem"
    navItems: [ 
        { order: 1, iconName: "home"},  // Add an icon to the 1st navigation item
        { order: 2, iconName: "star" },  // Add an icon to the 2nd navigation item
        // Continue to add as needed
    ],
    cart: { iconName: "shopping_cart" },  // Add an icon to the cart (set to false to disable) *Best results when Cart is set to text
    login: { iconName: "person" },  // Add an icon to the login (set to false to disable)
    mobileIcons: true,  // Enable icons on mobile (set to false to disable)
};

</script> 
<!-- LAZ-I.COM NAV ICONS -->

Customize your Icon Library

  • Go to the Google Material Icons library and customize your fonts. Once your happy, click any icon and look for the Static icon font. Take note of the style you chose (Outlined, Rounded, Sharp)

  • Copy the static font and paste BEFORE the plugin code.

Copy this and add to the code injection.

Configuration

Now, you can customize the settings to configure how the icons look on your website. Below is a simple guide to help you understand each setting and how to configure it.

Configuration Options Explained

You will configure your settings using a googleIconConfig object like this:

<!-- LAZ-I.COM NAV ICONS -->
<script>
  const googleIconConfig = {
    display: "left",  // Where to display the icon: right, left, above, below, false (to hide)
    iconStyle: "outlined",  // Icon style: outlined, sharp, round, default (outlined is default)
    color: "default",  // Icon color: "default" or a HEX code like "#FF5733"
    iconSize: "default",  // Icon size: "default" or a specific size like "1.4rem"
    spacing: "5px", // Icon spacing from the text
    navItems: [ 
      { order: 1, iconName: "shopping_cart"},  // Add an icon to the 1st navigation item
      { order: 2, iconName: "email" },  // Add an icon to the 2nd navigation item
        // Continue to add as needed
    ],
    cart: { iconName: "shopping_cart" },  // Add an icon to the cart (set to false to disable) *Best results when Cart is set to text
    login: { iconName: "login" },  // Add an icon to the login (set to false to disable)
    mobileIcons: true,  // Enable icons on mobile (set to false to disable)
    mobileDisplay: "right",  // Where to display the icon on mobile (left, right, above, below)
    mobileIconSize: "default"  // Mobile icon size: "default" or a specific size
  };
</script>

This is a great start, and will provide you consistent icons that match your navigation colors and size, as well as included in the mobile navigation.

Understanding the Configuration Options

Let’s go over each option and how to set it:

1. display

Where should the icon appear relative to the text?

  • Options: "right", "left", "above", "below", or "false" (to disable the icon).

Example:

display: "above",  // Displays the icon above the text

2. iconStyle

Insert the the style you chose for your icons. For example if you chose Outlined.

  • Options: "outlined", "sharp", "rounded", or "default" (which is "outlined").

Example:

iconStyle: "outlined",  // Uses the outlined style for icons

3. color

  • You can use "default" to use the website’s CSS color (it will be the same color as your site navigation).

  • Or, you can set a custom color using a HEX code (e.g., "#FF5733").

Example:

color: "#FF5733",  // Sets a custom color for icons

4. iconSize

  • You can use "default" to let the website’s CSS control the size (it will be the same size as your site navigation).

  • Or, specify a size (e.g., "1.4rem" or "24px").

Example:


iconSize: "1.4rem",  // Sets the icon size to 1.4rem

5. spacing

Control the amount of space between the icon and text.

  • You can use "default" which won’t set a spacing.

  • Or, specify a size (e.g., "0.4rem" or "4px").

Example:

spacing: "4px",  // Sets the spacing between the icon and text

6. iconOnly

Only shows the icon, not the navigation text.

  • It is disabled by default.

  • You can use true, to only show the icons.

Example:

iconOnly: false,  // Sets the nav to only show icons not the associated text

7. navItems

Time to set the icons!

  • Go to the Google Icons Library, pick an icon, and scroll down to the Icon name and copy it.

  • Set up the array of objects, each representing a navigation item (example below).

  • Use the order number to specify which navigation item (1 is the first item, 2 is the second, and so on).

  • iconName should be the name of the Google Material Icon you want to display.

Example:

navItems: [
    { order: 1, iconName: "shopping_cart" },  // Adds a shopping cart icon to the first item
    { order: 2, iconName: "email" },  // Adds an email icon to the second item
],

8. cart and login

Do you want to add icons to the cart and login buttons?

  • If you want to add an icon to the cart or login button, provide the iconName.

  • If you want to disable the cart or login icon, set it to false.

Example:

cart: { iconName: "shopping_cart" },  // Adds a shopping cart icon to the cart button
login: false,  // Disables the login icon

The cart icon will best work if the cart is set to text in Squarespace. Note that it will not appear in mobile, this is a Squarespace default setting.

9. mobileIcons

Do you want icons on mobile devices?

  • Set to true to enable, or false to disable. It is true by default if not included.

  • The nav items in the mobile will take on what you configured in desktop.

Example:

mobileIcons: true,  // Enables icons on mobile

10. mobileDisplay

You can override the mobile icon display if it needs to be different that desktop.

  • Options: "right", "left", "above", "below", or "default" (which uses the desktop setting).

Example:

mobileDisplay: "right",  // Displays the icons to the left of the text on mobile

Adjust the Icons Top Position With Minimal CSS (Left and Right Display)

The nav icons may be look too high or low from the text when you set the display to left or right. To control this you can play with top property css settings to get it right. Insert this css by going to Pages > Website Tool > Custom CSS and adjust the number.

/* Desktop */
.material-icons{
  top:2px !important; /* adjust the number and or unit */
}
/* Mobile */
.header-menu .material-icons{
  top:3px !important; /* adjust the number and or unit */
}

Advanced Customization

If you're comfortable with the basics and want more control over how your icons look, this section is for you! Here, we'll explore how to:

  • Override global settings for individual items.

  • Customize mobile-specific settings like mobileIconSize and mobileColor.

  • Disable icons for specific items.

Overriding Global Settings for Individual Items

You can customize specific navigation items, cart, and login icons by overriding the global settings. This means you can set different display, iconStyle, color, and iconSize for individual items.

How to Override Settings for Individual Items:

  • In your navItems, cart, or login configurations, add the properties you want to override.

  • If you don't specify a property, it will use the global setting.

Example:

<script>
const googleIconConfig = {
    // Global settings
    display: "right",
    iconStyle: "outlined",
    color: "default",
    spacing: "5px",
    iconSize: "1.4rem",
    
    // Navigation items
    navItems: [
        {
            order: 1,
            iconName: "home",
            display: "left",  // Overrides global display setting
            color: "#FF0000",  // Overrides global color
            iconSize: "2rem",  // Overrides global icon size
            iconStyle: "round",  // Overrides global icon style
            spacing: "7px",  // Overrides global spacing size
        },
        {
            order: 2,
            iconName: "info",
            // Uses global settings for display, color, iconSize, and iconStyle
        }
    ],
    
    // Cart icon
    cart: {
        iconName: "shopping_cart",
        display: "above",  // Overrides global display setting
        color: "#00FF00",  // Overrides global color
    },
    
    // Login icon
    login: {
        iconName: "person",
        iconSize: "2rem"  // Overrides global icon size
    },
    
    // Mobile settings
    mobileIcons: true,
    mobileDisplay: "left",
    mobileIconSize: "1.2rem",
    mobileColor: "#0000FF",
    mobileNavItems: [
        {
            order: 1,
            iconName: "home",
            color: "#FFA500",  // Overrides both global and mobile color
            iconSize: "1.5rem"  // Overrides both global and mobile icon size
        }
    ],
    mobileLogin: {
        iconName: "person_outline",
        iconStyle: "sharp",  // Overrides global icon style
    }
};
</script>

Customizing Mobile Configurations

You can customize settings specifically for mobile devices using properties that start with mobile. These settings allow you to have different icons, colors, sizes, and positions on mobile compared to desktop.

Mobile Configuration Options:

  • mobileIcons: true or false (default is true)

    • Enables or disables icons on mobile.

  • mobileDisplay: "right", "left", "above", "below", or "default" (uses desktop setting)

  • mobileIconSize: "default" (uses CSS size), or specify a size like "1.2rem"

  • mobileColor: "default" (uses CSS color), or specify a color like "#FF5733"

  • mobileSpacing: "default" (uses no spacing), or specify any css spacing like "5px"

  • mobileIconOnly: true or false (default is false), shows only the icon on mobile

  • mobileNavItems: An array of navigation items for mobile (overrides desktop navItems on mobile)

  • mobileLogin: Configuration for the login icon on mobile

  • *mobileCart: There is no mobileCart config because Squarespace overrides with their own mobile cart settings.

Example:

<script>
const googleIconConfig = {
    // Global settings
    display: "right",
    iconStyle: "outline",
    color: "default",
    iconSize: "1.4rem",
    
    // Navigation items
    navItems: [
        {
            order: 1,
            iconName: "home",
            display: "left",
            color: "#FF0000",
            iconSize: "2rem",
            iconStyle: "round"
        },
        {
            order: 2,
            iconName: "info",
            // Uses global settings
        }
    ],
    
    // Cart and login
    cart: false,  // Disables cart icon
    login: {
        iconName: "person",
        iconSize: "2rem"
    },
    
    // Mobile settings
    mobileIcons: true,
    mobileDisplay: "left",
    mobileIconSize: "1.2rem",
    mobileColor: "#0000FF",
    mobileNavItems: [
        {
            order: 1,
            iconName: "home",
            color: "#FFA500",
            iconSize: "1.5rem"
        }
    ],
    mobileLogin: {
        iconName: "person_outline",
        iconStyle: "sharp" // if different than global settings make sure to insert the font
    }
};
</script>

Full Configuration Example


<script>
const googleIconConfig = {
    // Global display setting for icons (left, right, above, below)
    display: "left",

    // Icon style (outlined, sharp, round, default)
    iconStyle: "outlined",

    // Global color for icons (default or any valid CSS color)
    color: "default",

    // Global icon size (default or any valid CSS size value)
    iconSize: "default",

    // Global spacing between icon and text, can leave blank to default
    spacing: "2px",

    // Global setting for icon-only mode
    iconOnly: false,

    // Configuration for desktop navigation items
    navItems: [
        { 
            order: 1, 
            iconName: "home", 
            color: "#FF5733", // Override global color
            iconSize: "1.2rem", // Override global size
            spacing: "0.75rem", // Override global spacing
            display: "left", // Override global display
            iconOnly: true // Override global iconOnly
        },
        { 
            order: 2, 
            iconName: "star"
            // Uses global settings for color, size, spacing, display, and iconOnly
        },
        { 
            order: 3, 
            iconName: "deployed_code", 
            display: "above" // Override global display
        },
    ],

    // Configuration for cart icon
    cart: { 
        iconName: "shopping_cart",
        color: "#33FF57", // Override global color
        iconSize: "1.5rem", // Override global size
        spacing: "0.6rem", // Override global spacing
        display: "left", // Override global display
        iconOnly: false // Override global iconOnly
    },

    // Configuration for login icon
    login: { 
        iconName: "person",
        color: "#5733FF", // Override global color
        iconSize: "1.3rem", // Override global size
        spacing: "0.55rem", // Override global spacing
        display: "right", // Override global display
        iconOnly: true // Override global iconOnly
    },

    // Enable icons on mobile
    mobileIcons: true,

    // Global mobile display setting (overrides global display for mobile)
    mobileDisplay: "left",

    // Global mobile icon size (overrides global iconSize for mobile)
    mobileIconSize: "1rem",

    // Global mobile spacing (overrides global spacing for mobile)
    mobileSpacing: "0.4rem",

    // Global mobile icon-only setting (overrides global iconOnly for mobile)
    mobileIconOnly: false,

    // Configuration for mobile navigation items
    mobileNavItems: [
        { 
            order: 1, 
            iconName: "home", 
            color: "#FF8C00", // Override global and desktop color
            iconSize: "1.1rem", // Override global mobile size
            spacing: "0.6rem", // Override global mobile spacing
            display: "above", // Override global mobile display
            iconOnly: true // Override global mobile iconOnly
        },
        { 
            order: 2, 
            iconName: "star"
            // Uses global mobile settings for color, size, spacing, display, and iconOnly
        },
        { 
            order: 3, 
            iconName: "deployed_code", 
            display: "right" // Override global mobile display
        },
    ],

    // Configuration for mobile login icon
    mobileLogin: {
        iconName: "account_circle", // Override desktop login icon
        color: "#2196F3", // Override global mobile and desktop login color
        iconSize: "1.2rem", // Override global mobile size
        spacing: "0.45rem", // Override global mobile spacing
        display: "right", // Override global mobile display
        iconOnly: true // Override global mobile iconOnly
    }
};
</script>

Fallback Mechanism

  • If a mobile-specific setting is not provided, the script will fallback to the desktop configuration.

  • For example, if you don't specify mobileIconSize, it will use iconSize from the global settings.

  • Similarly, if mobileNavItems is not specified, it will use navItems for mobile.

Disabling Icons for Specific Items

If you want to disable icons for certain items or sections:

  • Set the item or section to false.

Example:

navItems: false,  // Disables icons for all navigation items
cart: false,  // Disables the cart icon
login: false,  // Disables the login icon
mobileIcons: false,  // Disables all icons on mobile


Configuration Examples:

Unique Colors Icons


<script>
const googleIconConfig = {
    display: "left",
    iconStyle: "outlined",
    color: "default", // This will be overridden by individual colors
    navItems: [ 
        { order: 1, iconName: "home", color: "#FF5733" },
        { order: 2, iconName: "star", color: "#33FF57" },
        { order: 3, iconName: "deployed_code", color: "#3357FF" },
    ],
    cart: { iconName: "shopping_cart", color: "#FF33F1" },
    login: { iconName: "person", color: "#33FFF1" },
    mobileIcons: true,
};
</script>

Desktop Result

Mobile Result

Icons Above in Desktop, Left on Mobile


<script>
const googleIconConfig = {
    display: "above",
    iconStyle: "outlined",
    color: "default",
    navItems: [ 
        { order: 1, iconName: "home" },
        { order: 2, iconName: "star" },
        { order: 3, iconName: "deployed_code" },
    ],
    cart: { iconName: "shopping_cart" },
    login: { iconName: "person" },
    mobileIcons: true,
    mobileDisplay: "left", // Override display for mobile
};
</script>

Desktop Result

Mobile Result

Icons in Desktop, No icons in Mobile


<script>
const googleIconConfig = {
    display: "left",
    iconStyle: "outlined",
    color: "default",
    navItems: [ 
        { order: 1, iconName: "home" },
        { order: 2, iconName: "star" },
        { order: 3, iconName: "deployed_code" },
    ],
    cart: { iconName: "shopping_cart" },
    login: { iconName: "person" },
    mobileIcons: false, // Disable icons on mobile
};
</script>

Desktop Result

Mobile Result

Limitations:

  • You cannot use other Icon Libraries with this plugin.

  • Cart icon only works with text style cart in Squarespace. The custom cart icon will not show in mobile.

  • Folder nav items in the header nave will get icons, but you cannot apply icons in the folder content items.

 
LAZ-I https://laz-i.com
Previous

Dot Cursor