Hi there,
You can definitely make changes to the size and colour of Cubic’s social media icons using some custom CSS. ??
To add custom CSS: Do not edit your theme’s files directly. Any changes you make there will be lost when it comes time to update.
Instead, you can activate a custom CSS plugin.If you have Jetpack installed then you can activate its custom CSS module.
Next, enter the following snippet in your CSS plugin’s editor:
.social-navigation a:before {
font-size: 26px;
width: 26px;
color: #663399;
}
Increase/decrease the value of font-size and width in order to increase/decrease the size of the icons. (Both values need to be the same in order for the icons to remain centred.)
You can also change the colour of the icons from #663399 to any HEX colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:
https://www.color-hex.com/
The following snippet will then work to add text just before the social icons:
.social-navigation ul:before {
content: "Find us on social media:";
}
Similar to before, edit the value of content with the specific text you’d like to appear.
Please note: The above CSS is based on how the social icons appear on Cubic’s demo site. CSS can vary from site to site and, so, if the above snippets don’t work for you, please share a link to your site so I can take another look.
Thanks!