Easily Customize Your Site Navigation's Default Icons
Even though the default navigation icons in CustomerHub are of great utility, you can add your own style to them to give your site a more personalized, professional and attractive look.
Fortunately, customizing these icons is simple and only requires one line of CSS code to be added to your theme overrides CSS file. Once added, you can tailoring the icons for any of your navigation items in a matter of seconds. In this article, we’ll go over how to do exactly that.
These instructions can be used to customize the default CustomerHub site pages such as Library and My Feed as well as any other site navigation links you've added into the site navigation (instructions for that here).
Follow the steps outlined below to customize your navigation icons:
Navigate to Settings > Theme in your CustomerHub admin console
Click on the CSS tab, then edit the Overrides file
Paste in the following code snippet:
// Custom navigation icons
.ch-nav-Surfing::before { font-family: "Material Icons"; content: "surfing"; }Personalize the code snippet for each navigation link you would like to customize, as follows:
Important note: the navigation page/item title may include only the first word of the navigation item title OR all words of the title with a "." separating each word. However, numbers cannot be included.
Examples of Navigation page/item title:
Acceptable:
.ch-nav-Surfing::before { font-family: "Material Icons"; content: "surfing"; }
Acceptable:
.ch-nav-Surfing.Course::before { font-family: "Material Icons"; content: "surfing"; }
Not acceptable:
.ch-nav-Surfing.101::before { font-family: "Material Icons"; content: "surfing"; }(this will not work because the page title input includes a #)
Google icon names can be derived on the Google font site.
Here are two examples of different Google icon names:
Important note: Google icons with multiple words (i.e. "Rocket Launch"), will need to include an "_" in the Google icon name content in the CSS code, as follows:
.ch-nav-Launch.Dashboard::before { font-family: "Material Icons"; content: "rocket_launch"; }
Please note that you will need to add a line of code for each navigation item that you would like to customize. For example:
// Custom navigation icons
.ch-nav-Surfing::before { font-family: "Material Icons"; content: "surfing"; }
.ch-nav-Launch.Dashboard::before { font-family: "Material Icons"; content: "rocket_launch"; } Once you're done, click Save to save the CSS Overrides file.
Finally, Save and Publish the theme to make the changes live (note: theme publishing may take a minute or two--please do not leave the page until the theme is finished publishing).
That's it!