Guide for Social Icons For Wix

July 5, 2024 71 view(s)
Guide for Social Icons For Wix

The Social Media Icons Bar app lets you promote your social media profiles on your website, making it easy for customers to follow you or ask questions. It adds a sticky bar with social media icons linked to your profiles on every page of your site.

The following social media icons are available:

Facebook
LinkedIn
TikTok 
X
Instagram
Discord
Telegram
Messenger
Line
YouTube
Vimeo
Etsy
Tumblr
WeChat
WhatsApp
Threads
Fiverr
SoundCloud
UpWork
Pinterest
Reddit
Spotify
Github
Snapchat
Viber
Yelp
VK
Twitch
Weibo.

 

The app interface is divided into two columns: on the left, you can configure social icons, and on the right, you can see a live preview of how the social icons bar will look on the frontend.

Social Media Icons Bar Interface

 

Add icon to your frontend

To enable a social media icon, toggle the switch next to the social network's name. Click '…' to adjust the settings for that specific icon:

Icon settings

Name - the name of the social media network you're setting up the icon for.

Profile URL - insert the link to your social media profile, so customers can visit it by clicking the icon.

Hover Text - specify the text that will appear when users hover over the icon.

Show on Mobile - toggle to show or hide the social icon on mobile devices.

Show on Desktop - toggle to show or hide the social icon on desktop devices.


Click the Save button to apply the changes.

Then, you can arrange the order of enabled social icons in the bar by simply dragging and dropping them.

 

Upload a custom icon

If you can’t find the icon you need or want to use a custom design, click the +Custom Icon button. Then, fill in the following details:

Add custom icon

Name - the name of the social media network you're setting up the icon for.

Profile URL - insert the link to your social media profile, so customers can visit it by clicking the icon.

Hover Text - specify the text that will appear when users hover over the icon.

Click Upload social media icon and select it from your computer. 

Note: Only SVG files are supported, and the file size must not exceed 100KB.

 

Show on Mobile - toggle to show or hide the social icon on mobile devices.

Show on Desktop - toggle to show or hide the social icon on desktop devices.


Click the Save button to apply the changes.

Then, you can arrange the order of enabled social icons in the bar by simply dragging and dropping them.

 

Customize the icon

To customize your icons, click the Settings button at the top of the page.

Settings option

 

Layout

In Settings, open Layout to customize the following:

Layout settings

  • Icon Position: Choose from right, left, top, or bottom.
  • Orientation: Set the bar to be horizontal or vertical.
  • Icon Size: Select from tiny, small, normal, or big.
  • Spacing: Set the space between the icons for a cleaner, more organized look.
  • Display More: Enable this option to show a specific number of icons on the frontend. The remaining icons will be hidden under a "Display More" button.
  • Limit Visible Icons: Choose how many icons to display on the frontend, with the rest accessible via the "Display More" button.

Click the Save button to apply the changes.

 

Style

Return to Settings and open Style to customize the following:

Customize the style of social media icons

  • Icon Style: Use the left or right arrows to select from the available styles.
  • Background Color: Choose native, dark, or light backgrounds for the icons.
  • Icon Color: Choose native, dark, or light colors for the social media symbols. 
    Note: Use contrasting background and icon colors to ensure the symbols are clearly visible.
  • Icon Shape: Select the shape—circle, rounded, or square.

Hover effect customization

  • Hover Effect: Enable the toggle to change the background or icon color when hovered over.

Click the Save button to apply the changes.