[resolved] Adding Custom Social Media Icon in FOOTER? (8 posts)

  1. primasilva
    Posted 2 years ago #

    I was able to create custom icons in my site's header, but how do I do it in the footer?


  2. rdellconsulting
    Posted 2 years ago #

    In Customizit>Social Links there are 4 checkboxes

  3. primasilva
    Posted 2 years ago #

    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: http://www.themesandco.com/snippet/adding-custom-social-profile-link-icon-header/

  4. primasilva
    Posted 2 years ago #

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

  5. Adeluski
    Posted 2 years ago #

    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: http://contrapicado.es/
    Thank you in advance! :)

  6. ElectricFeet
    Posted 2 years ago #

    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="http://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('http://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.

  7. Adeluski
    Posted 2 years ago #

    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! :)

  8. ElectricFeet
    Posted 2 years ago #

    Thanks! :-)

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic