Adding Custom Social Media Icon in FOOTER?

In Customizit>Social Links there are 4 checkboxes

Thanks, but I mean they’re CUSTOM custom. Like not part of the original genericons package.

Basically had to use a modification of this for the header & I need to know where to add the same thing for the footer: https://www.themesandco.com/snippet/adding-custom-social-profile-link-icon-header/

Nevermind, I got it. Just tweaked the same code & added the footer hook thingy.

Hi @primasilva,
Could you explain me how did you finally get this?
I’ve used the same snippet, but I don’t know which modifications make in that code to change the footer instead the header.
My website is: https://contrapicado.es/
Thank you in advance! ??

Yes, I’m also at a loss to know how that code can be tweaked easily, as the footer socials don’t follow the same logic as the header.

Anyway, I played around a bit and found one way to do what you want without touching the theme’s code. Add the following to your child theme’s functions.php:

// Add extra socials in the footer
add_filter ('tc_colophon_left_block' , 'my_footer_socials_with_extras');
function my_footer_socials_with_extras($html) {
    return sprintf('<div class="%1$s">%2$s %3$s</div>',
                    apply_filters( 'tc_colophon_left_block_class', 'span4 social-block pull-left' ),
                    0 != tc__f( '__get_option', 'tc_social_in_footer') ? tc__f( '__get_socials' ) : '',
                    '<a class="social-icon icon-vimeo" href="https://vimeo.com/channels/nicetype" title="My favourite vimeo channel" target="_blank"></a>' .
                    '<a class="social-icon icon-xing" href="https://www.xing.com/profile/JaneDoe" title="Follow me on Xing" target="_blank"></a>'
                );
}

(N.B. don’t add this to the theme’s functions.php — see here for an explanation if you’re unfamiliar with using functions.php in a child theme).

If you are new to php and need to add more icons/lines or delete an icon/a line, note that the “.” is important. It is the concatenator in php, so if you only need one social icon and you delete the second one, you need to delete that “.” at the end of the first <a class="social-icon ... as well. If on the other hand, you add a third social icon, you will need to add a “.” after the second <a class="social-icon .... And so on.

Then add the following to your style.css:

.icon-vimeo:before {
content: "\f212";
}
.icon-xing:before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url('https://upload.wikimedia.org/wikipedia/commons/b/bc/Xing-icon.png') no-repeat;
    background-size: 18px 18px;
}

(You will need two backslashes if you copy the above CSS into your Custom CSS panel, as the backslash will need to be “escaped”. In a style.css file, it just needs one backslash.)

This example draws on nikeo’s snippet for the header. It shows how to set up the icon:
– if the icon is in genericons—as in the vimeo example; or
– if you need to link to a background image instead—as in the Xing example.

Note that this doesn’t affect the header social links. You will still need to use the snippet linked to above for the header socials.

Thank you very much, @electricfeet! Your code works perfectly and your deep explanations make me understand what I’ve done in any moment, so it’s great! ??

Thanks! ??

I have to confess that the deep explanations are often also for my benefit: I’m learning as I go too ??