Social Icon Block

Description

The Social Icon Block displays icons linking to your social media profiles or sites. You can add it to pages, posts, your footer menu – anywhere it makes sense to direct people to your social channels.

Screenshots

Settings

Social Icon Block Settings

Link Settings

The ‘Open in New Tab’ toggle allows you to choose whether or not the link opens in a new tab. By default this option is toggled off, so clicking the Social Icon will open the social profile in the same browser tab.

Responsive Layout

Justify, Align, Direction, and Spacing allow you to control how the icons appear within the container.

Justify controls the left-to-right position of the group of social icons. Align controls the top-to-bottom position of the group of icons. Direction controls whether they appear as a row, a column, a reverse row, or a reverse column. Spacing controls the amount of spacing between the icons in relation to each other.

Icon Styling

  • Icon Size changes the size of all of the social media icons at once
  • Border Side and Width configure a border on one or all sides of your icons, and control how wide the border is
  • Border Style controls the look of your border (solid, dotted, or dashed)
  • Border Colour enables you to set the icon border colour from your palette(s) set in Global Styles > Colours
  • Border Radius rounds the edges of your border (used for solid or dashed border styles)

Colour

These settings allow you to customize the colour (the outline and logo) and the background colour (the fill colour). The available colours are based on your palette(s), as configured in Global Styles > Colours.

Advanced

Additional CSS Class(es)

This allows you to enter a unique Class identifier, for custom CSS targeting within the theme to faciliate custom development. More about Theme Customizations.

It also enables the use of Foundry utility classes. More about Utility Classes.