Changing footer social icon to custom image

[powrider686]

Hi there,
On my site dylanhbrown.com/stills/, I’d like to change one of the icons to a custom image. I would like to do it to the envelope and change that to an image I supply. How could I achieve that?

Thanks for the help!

[christian]

Hey @powrider686,

You would need to add this code in Theme Options > CSS

.x-colophon.bottom .x-social-global a i.x-icon-envelope::before {
    content: '';
    display: block;
    background: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/envelope-icon.png) no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
}

Change the image URL with your own and it would be best to use a square image with 18px width and height. And, to target other icons, use the Element Inspector of the browser to get the i tag’s class.

Please note that the custom code was meant to help you get started. You will need to know how to learn and use CSS to maintain and/or enhance it. Custom coding is not a included in our support service.

For a none coding solution, you need to upgrade to Pro.

Hope that helps and thank you for understanding.