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:
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:
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:
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:
| Setting | Description |
|---|---|
| Icon Color | Defines the icon color. It affects all icons types. |
| Icon Hover Color | Defines the hover icon color. It affects all icon types. |
| Border Color | Defines the border color of the Simple Rounded, Square Pointed & Square Rounded icon types. |
| Background Color | Defines the background color of the Simple Rounded, Square Pointed & Square Rounded icon type. |
| Hover Background Color | Defines the hover background color of the Simple Rounded, Square Pointed & Square Rounded icon types. |
If you want to have different color for each icon, you need use custom css code.
.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.
