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.

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!

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!