Knowledge Base

Builder brands: How to add an icon

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, an envelope icon next to your contact email, or a calendar next to your appointment options.

In this article, we will learn how to add an icon and manage its settings.

For more detailed help about adding images, check out: Adding and editing images.

Add an icon

  1. Log in to your account manager via https://www.networksolutions.com/my-account/login.
  2. Click Websites from the left navigation menu.

    websites tab
     
    Note: Alternatively, if you have multiple website builder accounts, click Launch to proceed.
  3. Launch your website editor by selecting Edit Site.

    Sign in to your site by selecting Edit Site
     
  4. Select the Elements tab in the left-hand toolbar from the main design dashboard.

    >Select the Elements tab
     
  5. Next, select Images.

    select Images
     
  6. Then select the Icon option.

    select the Icon
     
  7. Choose any icon you wish to have on your website from the display list.

    Choose any icon you wish to have on your website from the list that displays
     
  8. Once selected, you will land on the main design dashboard, where you can drag and drop the icon to any location you choose.

    you will land back on the main design dashboard where you can drag-and-drop the icon to any location you choose
     
  9. You can now resize the icon manually using the image handles around it when you click on it.

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

 

Manage icon settings

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

Select an icon from your main design dashboard to reveal the toolbar
 

From this toolbar, you can:

  • Change the icon
  • Change the icon's 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

From the More settings, you can:

More Settings
 
  • Change where the icon docks on the page
  • Change the icon's background color
  • Add drop shadows
  • Add glow effects
  • Advanced settings

 

Advanced settings

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

Advanced Settings
 
  • Select either settings, style, size, and position, or animations to expand those menus.

Get practical tips and product updates on LinkedIn.
Follow Network Solutions