Certain Novi site layouts use icons in select sections to link to or highlight a section.

Depending on your website's layout, you may have icons either in the top navigation section:

- or -

In the callout section of your homepage:

Making changes to these icons does require a bit of comfort with updating HTML source code, but never fear! We're here to walk you through it.


Choose A New Icon

Navigate to www.fontawesome.com. You won’t need to login to find an icon.

Use the Search Icons bar at the top of the site to search for the type of icon you are needing. For example, searching "home" will show you icons of a house.

From the list of results, find a new icon you like and click to view the details. You'll need to select the darker colored icons, as the icons that appear "grayed out" are only available if you have a PRO account to Font Awesome.

Once you've selected your icon, click to copy the HTML line code for the icon from the details page.


Update The Icon On Your Website

Now that you know which icon you'd like to use, head to your website and make sure you are logged in with your admin account.

Using the frontend content editor in your section, open the Source Code under Tools.

Add the HTML code for the new icon

You will need to combine the HTML code you copied from Font Awesome with the existing code to keep the style formatting to match the other icons on your site.

  • For example, if the original code is:

<i class="far fa-calendar-alt c-four-col-hp__icon"> </i>
  • & the code you copied from Font Awesome is:

<i class="fas fa-home"></i>
  • Paste the code you copied, add the missing piece (c-four-col-hp__icon) and delete the original icon's code. The final code to update with the example of a calendar icon would be:

<i class="fas fa-home c-four-col-hp__icon"></i>

Click OK and be sure to save. Now you have a new icon on your homepage!


Update The Icon and Text Links

Once you've updated your icon, don't forget you may need to also change the link for the icon and/or the text link below the icon.

Update the Icon Link

  • To update the link for your icon, first copy the friendly file name of the new page you will link to. A quick way to ensure you have the correct link, in a separate browser window, navigate to the page and copy the friendly file name from the URL:

  • Next, update the URL reference code within the Source Code for the icon you are linking. For example, if the original friendly file name is:

href="/membership-information"
  • & the new friendly file name is:

/events/?CalendarView=1
  • Paste the URL reference you copied, and delete the original icon's URL code. The final code to update with the example of a calendar icon would be:

href="/events/?CalendarView=1"

Update the Text Link

  • Click in the text below the icon you need to update. Use the frontend content editor Insert/Edit Link to update the URL and Text to Display.


Related Articles

Did this answer your question?