Custom social media icons

Hi rarch47!

You can add custom social icons using child themes. Please see the link below which provides you with instructions

http://kriesi.at/documentation/enfold/custom-social-icons/

Best regards,
Vinay

Hi!

PNG images are currently not supported for social icons. It requires a lot of customization to use custom png social icons you need to make a css sprits use a site like http://www.spritecow.com/ make one image out of all social icons and upload to your server then setup social icons as usual in the theme options and override the svg icons using css sprit icons this is a lot of customization you probably need to hire a freelancer. but if you like us to give it a try set it up and send us the link we will try to do it for you if it is not going to take a lot of time we will definitely help you.

Regards,
Vinay

• This reply was modified 8 years, 10 months ago by Vinay.

Hi!

No need to edit PHP files, all you need to do is check how the default icons are rendered by Enfold and overwrite them with your custom images (using CSS), for example for icon elements:

.iconbox_icon:before {
    content: "";
    background: url('_URL_to_PNG_here_');
    background-size: contain;
    width: 20px;
    height: 20px;
    display: block;
}

Cheers!
Josue

What icon element you want to change?

Ok can you post a link to the Enfold install in question?

Hey!

Use this code:

#top .social_bookmarks li:hover a {
    background: transparent !important;
}
#top .social_bookmarks li a:before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;

}
#top .social_bookmarks li.social_bookmarks_facebook a:before {
    background: url(https://ausidentities.com.au/members/wp-content/themes/np/images/facebook.svg) center center no-repeat;
    background-size: contain;
}

#top .social_bookmarks li.social_bookmarks_twitter a:before {
    background: url(https://ausidentities.com.au/members/wp-content/themes/np/images/twitter.svg) center center no-repeat;
    background-size: contain;
}

#top .social_bookmarks li.social_bookmarks_youtube a:before {
    background: url(https://ausidentities.com.au/members/wp-content/themes/np/images/youtube.svg) center center no-repeat;
    background-size: contain;
}

Modify and extend as needed.

Regards,
Josue