Social networks are the platforms that connects people and companies with their customers and let them follow up on the latest news. Since they are advertising tools, lots of companies or personal websites display their social network accounts on their websites to attract new followers. That’s why the placement and design of these links are important in order to get the attention of new followers.

In this article, we’ll explain how to add social icons and configure their design and location in the header.


Adding Social Networks

To add social networks:

1From the WordPress left menu, go to Theme Options > Header.

Configuring social networks - Header

2Under the Social Network section, select your social website in the Select a Site field and then enter the full URL to your site’s profile in the Enter Full URL field. 

Configuring social networks - Social network

3Click on the Add New button. Go to step 2 and repeat the process if you want to add more social networks.
4Click on Save Settings.

Configuring the Location

It is possible to display the social network icons in either the header toolbar or the header section.

To change the icon’s location:

1From the WordPress left menu, go to Theme Options >Header.

Configuring social networks - Header

2Select the location of your icons in the Header Social Networks Location dropdown. This setting allows you to select toolbar, header or completely disable the icons.

Configuring social networks - social networks location

3Click on Save Settings.

Configuring the Design

Social network icons design type and colors can be changed easily in the Social Networks and Header Toolbar screens. To change the icon type and size:

1From the WordPress left menu, go to Theme Options > Header.

Configuring social networks - header

2Select your icon type in the Header Social Networks Style dropdown and the size in the Icon Size dropdown.

Configuring social networks - social network style

3Click on Save Settings.

Configuring the Icon Color

There are two setting pages for customizing the colors depending on the location you selected for your icons.

To change icon color:

1From the WordPress left menu, go to Theme Options >Header page.

Configuring social networks - header

2Scroll down to the Social Networks section.

Configuring social networks - social network icons color

Setting Description

Icon ColorDefines the icon color. It affects all icons types.
Icon Hover ColorDefines the hover icon color. It affects all icon types.
Border ColorDefines the border color of the Simple Rounded, Square Pointed & Square Rounded icon types.
Background ColorDefines the background color of the Simple Rounded, Square Pointed & Square Rounded icon type.
Hover Background ColorDefines the hover background color of the Simple Rounded, Square Pointed & Square Rounded icon types.
3Click on Save Settings and check the result.

 

If you want to have different color for each icon, you need use custom css code.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Custom CSS.
2Add this code in Custom CSS section:

.instagram-hover svg {
    fill: red;
}

.facebook-hover svg {
    fill: blue;
}

Change color values to any you want.

This code changes colors for Instagram and Facebook icons.

To edit more icons, use the same code, just change .facebook-hover class to the icon class you want to modify, for example, .twitter-hover or .pinterest-hover.