How to Display and Customize Social Media Icons on Your Website: Complete Guide

How to Display and Customize Social Media Icons on Your Website: Complete Guide

By Michael Thompson

January 14, 2025 at 08:53 PM

Integrated social media icons are customizable elements that display your social media links on your website. Here's how to manage them effectively:

Displaying Icons

For Version 7.1:

  • Open Pages panel and click Edit on any page
  • Hover over header and click Edit site header
  • Click Add elements and enable Links to social media
  • Save changes

For Version 7.0: Icons automatically display in these template families:

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

Customizing Icon Style

Size and Border:

  1. Open header editor
  2. Click social media links and select Design
  3. Adjust icon size using slider
  4. Choose border shape (Outlined or Solid)
  5. Adjust border thickness if outlined

Color Settings:

  • For Solid/Gradient headers:

    • Edit Navigation color in header design
    • Hover color follows Main button background settings
  • For Adaptive headers:

    • Access site styles > Colors
    • Edit Navigation links in selected color palette
    • Hover color follows upper section's color scheme

Hiding Icons

Version 7.1:

  • Edit site header
  • Click Add elements
  • Disable Links to social media
  • Save changes

Version 7.0:

  • Open Site Styles panel
  • Locate social media settings
  • Toggle visibility options
  • Save changes

Additional styling options vary by template and may include icon shape customization (Round, Square, or Normal branding shape).

Note: To add icons to other areas of your site, use social media blocks. For icon arrangement and service management, refer to social media icon settings.

Related Articles

Previous Articles