Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Top Bar – Setup the Top Bar Appearance, Design and Contents
  5. Add Social Icons in the Top Bar

Add Social Icons in the Top Bar

Navigate to your website admin, browse to Appearance > Customize > Top Bar.

You can access the Social panel under the Top Bar section just by selecting the “Social” section.

You can on over the checkbox next to “Enable Social” to activate the social icons on the top bar. As you click on this checkbox, the options will tremendously expand to these as shown above.

If you want your top bar to not show the social icons, you can keep this checkbox unchecked to not display any social icons.

Display Social Icons in Top Bar on Mobile

If you have the social icons enabled it will display for all the mediums, such as mobile, desktop, etc. However, you can specifically set the social icons to either be visible on a mobile or not, you can click on the checkbox next to “Display Top Bar Social on Mobile” if you want social icons to display on mobile. Just keep it unchecked, if you do not wish to show social icons on mobiles.

Open Social Links in Same or New Window

You can choose to open the social link in either the same window or a new window. Depending upon your business and audience, but most people prefer to open such social icons in a new window. As it lets the visitors focus at your website/blog and return back to the website once they are done reviewing the social links.

Change the Icon Size (Font Size) of Social Icons in Top Bar

The icons are based on a Font; it’s an excellent resource for creating all kinds of amazing icons for business and personal use. The best thing is these aren’t images, so if you change the font size you will see the icon size change as well. Just use the slider underneath the “Font Size (px)” label within the Social Panel. You will be able to live preview the social icons size changing as you use the slider.

Additionally, there’s a little circular desktop icon right next to the label. Clicking it would expand it to three icons. The first one is for desktops, second for tablets and third for mobiles. So you can click those and individually set the icon font sizes for each of these resolutions.

Change the Right & Left Padding Space for the Social Icons

You can create a variety of interesting design patterns for social icons. Using space in-between icons is a must. It makes the design look cleaner and sleek. Careful use of whitespace is always going to make your site look better.

Here’s how you can add more space between icons. Just click on the first input box under the “Padding (px)” label in Social Panel to change the right padding. For the left padding, please use the second input box.

If you want to keep the same padding for the left and right. You can either separately enter the same numbers, or click the third chain icon button. It will link your input boxes, such that when you enter any number in one input, it would duplicate the same into other.

You also get the three icons next to the label, for separately setting padding space on desktops, tablets, and mobiles. The usage is the same as we have discussed above for setting the font size.

Change the Social Icons (Links) Color

As we know the icons are based on fonts and that these icons actually link to the relevant social platforms. You can easily change the color of these icons as well. Just click on the “Select Color” button underneath the “Social Links Color” label and choose the color of your choice.

Change the Hover (Mouse-over) Color of the Social Icons

 You can highlight the social icons with any color of your choice. It’s known as a hover, where you can change the icon’s color as you mouse-over a specific icon. To choose the hover color, just click over the “Select Color” button underneath the “Social Links Color: Hover” label to choose the mouse-over color for icons.

Add Details for Social Accounts, RSS & Email

Most businesses and individuals use a few major social platforms only. You maybe are using Twitter, Facebook, Pinterest, Instagram or maybe even LinkedIn. That’s pretty much it!

You have a social account identity, an identifier that differentiates your social account from another. Each platform has a different system to manage these identifiers; most let you write and choose your own identifiers (any custom text).

You get input boxes for each of these social platforms. Just click on the input box under the social label that you want to use. Enter your identifier, and the respective social icon would appear in your website social bar.

Just make sure of one thing, for example, if you’re using Twitter, you’ve given a # tag in the input box. You need to just enter your id only after the #; it could be let’s say “anythingyesanything” so you don’t need to enter an additional hash.



Google Plus


















Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?