Docs

[newskywebsites]

What is the best way to duplicate the colors and size of my social media icons under my contact info as shown on the attached? I was hoping there would be a tool for this to just place social icons anywhere, but I don’t see it. What’s the easiest way to do this and still have custom colors, proper size, spacing, links, etc.

Using Cornerstone and latest version of everything.

Thanks!
Dawn

[Joao]

Hi There,

You need to add them in a div, limit it´s width and make them float right, you can add the following code in a RAW Element in Cornerstone and adjust according to your needs.

<div style="width: 30%">
<a style="color: red; float: right; font-size: 25px; margin-right: 15px;" href="#social-profile-url">[icon type="facebook-square"]</a>
<a style="color: red; float: right; font-size: 25px; margin-right: 15px;" href="#social-profile-url">[icon type="google-plus-square"]</a>
<a style="color: red; float: right; font-size: 25px; margin-right: 15px;" href="#social-profile-url">[icon type="twitter-square"]</a>
<a style="color: red; float: right; font-size: 25px; margin-right: 15px;" href="#social-profile-url">[icon type="linkedin-square"]</a>
</div>

Let us know how it goes,

Joao

[newskywebsites]

Thank you, that worked (note to others: remove line breaks & float). However, there is no hover effect. Is that possible?

Thanks,
dawn

[Joao]

Hi Dawn,

Go to Cornerstone > Settings > Custom CSS or to Appereance > Customizer > Custom > CSS (If you want to affect the whole site) and add :

[data-x-icon]:hover, [class*="x-icon-"]:hover {
color: black;  
  
} 

Hope that helps

Joao

[newskywebsites]

That worked perfectly! Thank you so much! You guys are the best!!
Dawn

[Joao]

Thanks for your kind words Dawn,

Reach us whenever you need help,

Joao

[Author]

Posts