24/7/365 Support(866) 96-GATOR
  1. Knowledge Base
  2. >
  3. How to Add an Icon

How to Add an Icon

Looking for help for the GATOR Builder by HostGator Website Builder product? Please see GATOR's Knowledge Base.
This content only applies to those using GATOR Builder by HostGator.

Icons are great for your website when you want to add emphasis to the content you create. Some examples would be adding a Phone icon next to your contact info, adding an envelope icon next to your contact email, or a calendar next to your appointments options.

In this article, we will learn How to Add an Icon and How to manage their settings. For more detailed help about adding Images checkout: Adding And Editing Images (VIDEO)


To Add an Icon

  1. Select the Elements in the left-hand toolbar from the main design dashboard.

  2. Next, select Images, then the Icon option from the slide menus that appear to the right.

    User-added image

  3. Choose any icon you wish to have on your website from the list that displays.

    User-added image

  4. Once selected, you will land back on the main design dashboard where you can drag-and-drop the icon to any location you choose.

    User-added image

  5. You can now resize the icon manually using the image handles that appear around the icon when you click on it.

    User-added image


Manage Icon Settings

  1. Select an icon from your main design dashboard to reveal it’s a toolbar.

    User-added image

    From this toolbar you can:

  • Change the Icon
  • Change Icons Color
  • Add a Link to an Icon
  • Add Animations
  • Send Icon Back a Layer
  • Bring Icon Forward a Layer
  • Copy that Icon
  • Delete the Icon
  • More Settings

User-added image

From the More Settings you can:

  • Change where the image Docks on the page
  • Change image Background Color
  • Add Drop Shadows
  • Add Glow Effects
  • Advanced Settings

Advanced Settings

Although there are a lot of the same options in the Advanced Settings as there are in the Icon Toolbar, you can manually adjust most of those settings from this section as well as work with more specific parameters.  

  • Select either Settings, Style, Size And Position or Animations to expand those menus.