[leastweaselParticipant]

Hi,

Because font-awesome doesn’t have all the matching social icons that I need, I made custom PNG images to use on my top content band. (I will be replacing all the social icons that are currently there) What is the best way to size them down so they look good on retina. I would want them to pretty much be sized and behave exactly like the font-awesome icons there now) Site details on next post.

[leastweaselParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! You can use this HTML markup

<ul class="footer-socials">
	<li><a href="#" target="_blank"><img src="/wp-content/path/to/your/fb.png" alt="facebook" title="Facebook"></a></li>
	<li><a href="#" target="_blank"><img src="/wp-content/path/to/your/twitter.png" alt="twitter" title="Twitter"></a></li>
	<li><a href="#" target="_blank"><img src="/wp-content/path/to/your/g+.png" alt="google plus" title="Google Plus"></a></li>
	<li><a href="#" target="_blank"><img src="/wp-content/path/to/your/instagram.png" alt="instagram" title="Instagram"></a></li>
</ul>

Then add this under Custom > CSS in the Customizer.

.x-colophon .footer-socials {list-style: none;margin-left: 0;}
.x-colophon .footer-socials li {display: inline-block;margin-right: 12px;}
.x-colophon .footer-socials li:last-child {margin-right: 0;}

Hope it helps, Cheers!

[leastweaselParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Sorry about that, Its just a class. You can name that whatever you want (no numbers and special characters) but make sure you also update the CSS selectors.

.your-class {list-style: none;margin-left: 0;}
.your-class li {display: inline-block;margin-right: 12px;}
.your-class li:last-child {margin-right: 0;}

Cheers!

[leastweaselParticipant]

okay got it. Thank you!

[ZeshanMember]

You’re welcome! 🙂

[leastweaselParticipant]

This reply has been marked as private.

[leastweaselParticipant]

I was able to figure out another solution using a custom image class.
All seems to be working now.

[ChristianModerator]

Glad you’ve figured it out. 🙂

[Author]

Posts