Navigation
Archive / Replace font-awesome icons with custom PNG files
This is archived content. Visit our new forum.
  • Author
    Posts
  • August 13, 2015 at 12:00 pm #358429
    leastweasel
    Participant

    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.

    August 13, 2015 at 12:07 pm #358435
    leastweasel
    Participant
    This reply has been marked as private.
    August 13, 2015 at 5:06 pm #358626
    Friech
    Moderator

    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!

    August 13, 2015 at 5:14 pm #358632
    leastweasel
    Participant
    This reply has been marked as private.
    August 13, 2015 at 9:33 pm #358770
    Friech
    Moderator

    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!

    August 14, 2015 at 12:02 pm #359281
    leastweasel
    Participant

    okay got it. Thank you!

    August 14, 2015 at 2:55 pm #359410
    Zeshan
    Member

    You’re welcome! 🙂

    August 15, 2015 at 2:04 pm #360017
    leastweasel
    Participant
    This reply has been marked as private.
    August 15, 2015 at 4:05 pm #360050
    leastweasel
    Participant

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

    August 15, 2015 at 10:34 pm #360164
    Christian
    Moderator

    Glad you’ve figured it out. 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-358429 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>