Social Network Icons [Zipify Pages]
The "Icons" block allows you to display a row of social, ecommerce and other icons!
Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

Overview

The "Social Network Icons" block can be found in the Misc section of the page block library:

Use it to show a row of Social, Ecommerce and other icons on your page. Each icon can be linked to a specific URL destination when clicked on.

Adding, Removing and Rearranging Icons

Once the Icons block has been added to your page, additional icons can be added and settings can be accessed by clicking directly on the icons block (1) or on the ✏️ button (2) in the block's top-left corner in the page builder:

In the left sidebar of the builder under the Items dropdown (1) you can:

  • Delete an icon (2) by clicking the πŸ—‘οΈ button

  • Change the icon (3) to a different one

  • Add a URL destination (4) for the icon

  • Add Alt Text (5) for the icon

  • Move the icon (6) to a different location via drag and drop

  • Add a new icon (7) by clicking the "+ Add New Item" button

When the "+ Add New Item" button is clicked, the Choose Icon popup shows where you can browse through the available Social and E-commerce icon options available (1) or use the Search field (2) to find a specific icon:

Icon Styles

Under the Styling dropdown (1) you can set the Icon Color (2), the Background Style (3) and the Hover State (4) for the icons:

Background Styles include None (1), Outlined (2) and Contained (3) and includes options to set the Icon Shape and Background Color if either outlined or contained is chosen:

Hover State includes None, Change Opacity and Change Color. The effects of the hover state chosen can be seen by hovering over an icon in the builder:

Icon Settings

Settings for the Icons element can be customized on each device type (Desktop / Tablet / Mobile) independently by selecting a device type to edit on. Click here for more details about device edit modes:

Under the Settings dropdown (1) you can set the Icon section's Alignment (2), Size (3), Column Spacing (4) and Row Spacing (5)

Pre-set options (S/M/L/XL) are provided for Size, Column Spacing and Row Spacing as well as a Custom option and slider to set the exact px value for each if desired.

Did this answer your question?