Adding Social Media Icons to Footer

[Hemmings]

Hi,

Would there be any way to add social media icons to the footer with a shortcode?

Thanks,

Adam

[Kieran_SQ]

Hi Adam,

Thanks for reaching out today, you can use the below shortcode anywhere in the footer widgets to display your defined social profiles.

[kleo_social_icons]

You can set your social profile by going to Theme Options > Social Info

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Hemmings]

Hi Kieran,

Thanks for the shortcode. Unfortunately, it seems to display the icons vertically as bullet points in a list. Any way to force them to appear horizontally?

Thanks very much,
Adam

[Kieran_SQ]

Hey,

Please add the following to the KLEO Child theme or to Theme Options > General Settings > Scroll to: Quick CSS

#footer .kleo-social-icons li {list-style: none;display: -webkit-inline-box;margin-right: 10px;}

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[vidjaylee]

Hi,
Sorry to join up the discussion, Interesting topic.
I have one question, how change social icons?

Thanks!

Ahmed.

[Kieran_SQ]

Hi Ahmed,

Do you mean to add your own or change the existing ones?

If you mean to add your own please try this in your KLEO Child theme functions.php file

COPY CODE

add_action( 'kleo_get_social_profiles', 'kleo_my_extra_social_icons' );
function kleo_my_extra_social_icons( $icons ) {
    $icons .= '<li><a href="http://soundcloud.com" rel="nofollow"><i class="icon icon-soundcloud"></i> <div class="ts-text">Soundcloud</div></a></li>';
    $icons .= '<li><a href="http://mixcloud.com" rel="nofollow"><i class="icon icon-mixcloud"></i> <div class="ts-text">Mixcloud</div></a></li>';

    return $icons;
}

Please adjust as needed.

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[vidjaylee]

Hi Kieran ,
change the existing ones, by rounded icone with default social backround color for exemple.
thank you for the snippet.

Ahmed.

[Kieran_SQ]

Hey

You could try the below CSS in your KLEO Child theme’s style.css or in Theme Options > General Settings > Scroll to: Quick CSS

.kleo-social-icons .icon-twitter:before {content: '\e967';}

In this example I have used Twitter, please change Twitter to your desired social network. Please replace e967 with your desired icon, you can see them all, and their corresponding numbers here http://fontello.com/

You can repeat this method for as many icons as you wanted to edit.

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[vidjaylee]

Thank you very much

Ahmed

[Hemmings]

Hi,

I’ve added #footer .kleo-social-icons li {list-style: none;display: -webkit-inline-box;margin-right: 10px;} to the Quick CSS section, but I’m not seeing any social icons yet. When I add the shortcode for social icons even with the CSS fix, they still list in a list form with bullets.

Sorry for the problems with this and thanks for your help,
Adam

[Kieran_SQ]

Hi, please share a link to a page where I can see it live. What browser are you using? Thanks

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Hemmings]

Hi,

You can see it in the footer of any of our pages (www.citizen-state.com). I’m using Chrome.

My best wishes and thanks,
Adam

[Kieran_SQ]

Hi, since it is added to the Socket area, this is the correct CSS:

COPY CODE

#socket .kleo-social-icons li {
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Hemmings]

Thank you! Great fix.

Very best wishes,
Adam

[Author]

Posts