Adding custom social icons

documentation is here: https://kriesi.at/documentation/enfold/custom-social-icons/

if you do not have a font icon of your “social-icon” you can use png files for that.

1 look for a png file you like to have
f.e.:

2 : upload it to your media library and copy the link – you will need it:

3 : now go to your functions.php of your child-theme and enter:
that little goodreads will be the addendum to the class set by enfold

function avia_add_custom_social_icon($icons) {
    $icons['Goodreads'] = 'goodreads';
    return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

with that you can now choose the new social icon on Enfold Options – Social Profiles ( it is at the end of the list)

4 : This comes to quick css ( you see here is the automatically created class av-social-link-goodreads )

#top #wrap_all .av-social-link-goodreads a:before{
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://link-to-your-image/goodreads.png) no-repeat center center;
    background-size: contain;
}

5 : styling the hover effect – this to quick css ( color makes no sense here because we have no font )

#top #wrap_all .av-social-link-goodreads:hover a{
    color:#fff; 
    background-color:#9fae37; 
}

6 : for another “social-icon” you only have to replace goodreads

Is there an easier option to do this? I am not familiar with number 4 in the list above…

I just wanted the Goodreads icon available for my social profiles on enfold theme for