How to Display and Customize Social Media Icons on Your Website

How to Display and Customize Social Media Icons on Your Website

By Michael Chen

January 14, 2025 at 11:33 PM

Display & Customize Social Media Icons

Social media icons typically appear in your site's header automatically after you add social media links. Here's how to manage them effectively:

Displaying Icons in Version 7.1

  1. Open Pages panel and click Edit
  2. Hover over header and select Edit site header
  3. Click Add elements
  4. Enable Links to social media
  5. Save changes

Adding Social Media Links

If you haven't added links yet:

  • Hover over header
  • Click Links to social media
  • Click pencil icon
  • Add links in Content tab
  • Save changes

Customizing Icon Appearance

Size and Margin:

  • Access header editor
  • Click social media links
  • Select Design tab
  • Adjust icon size
  • Choose margin shape (Outline or Filled)
  • Set margin thickness if using Outline

Color Customization:

For Solid/Gradient Headers:

  • Open header editor
  • Click Edit Design > Color
  • Adjust Navigation color setting

For Adaptive Headers:

  • Access site styles
  • Select Colors
  • Edit navigation links in the header color theme
  • Save changes

Additional Style Options:

  • Shape options: Round, Square, or Normal (service-specific)
  • Size adjustments
  • Margin customization
  • Color schemes

Hiding Social Icons

Version 7.1:

  • Edit page
  • Open header editor
  • Click Add elements
  • Disable Links to social media
  • Save changes

Version 7.0:

  • Open Site Styles
  • Locate social media settings
  • Select hide option
  • Save changes

Note: Icon placement may vary by template family. Some templates require manual icon activation through template-specific settings.

Related Articles

Previous Articles