How to Display and Customize Social Media Icons on Your Website

How to Display and Customize Social Media Icons on Your Website

By Michael Turner

January 14, 2025 at 11:33 PM

Integrated social media icons allow you to display and customize social media links on your website. Here's everything you need to know about managing these icons effectively.

Displaying Social Media Icons

Version 7.1:

  • Access through the site header
  • Open Pages panel > Edit page > Edit site header
  • Click Add elements > Enable Social media links
  • Add your social media links in the Content tab
  • Save changes

Version 7.0: Icons appear automatically in templates:

  • Aviator
  • Bedford
  • Brine
  • Farro
  • Montauk
  • Pacific
  • Skye
  • Tremont
  • York

Customizing Icon Appearance

Size and Margin:

  1. Edit site header > Click social media links > Design
  2. Adjust Social media icon size
  3. Choose margin shape (Outline or Solid)
  4. Set margin thickness if using Outline style

Color Settings:

  • For Solid/Gradient headers:

    • Edit header > Color > Navigation color
    • Hover color controlled by Main button background setting
  • For Adaptive headers:

    • Site styles > Colors > Edit color theme
    • Adjust navigation links color
    • Hover color controlled by Main button background in upper section

Icon Shapes Available:

  • Round
  • Square
  • Normal (default service branding)

Hiding Social Media Icons

Version 7.1:

  1. Edit page > Edit site header
  2. Add elements > Disable Social media links
  3. Save changes

Version 7.0:

  1. Open Site Styles panel
  2. Locate social media settings
  3. Choose hide option
  4. Save changes

For custom placement of social media icons in other areas, use the social media links block feature.

Related Articles

Previous Articles