Navigation
Archive / Using social icons in the body of a page
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • April 13, 2016 at 10:58 pm #881361
    scarter
    Participant

    Hi there,

    Forgive me if this question has already been answered…

    I would like to use social icons in the body of my homepage (not in the header or footer area). Could you please provide step-by-step instructions on how to do so? I’m a beginner, so please go easy on me. 😉

    Thanks in advance!

    Robin

    April 14, 2016 at 3:02 am #881709
    Friech
    Moderator

    Hi Robin,

    Thanks for writing in! Please navigate to this page: http://theme.co/x/demo/renew/1/shortcodes/icons/ and choose your icon.

    After that copy the icon shortcode and wrap it on a anchor <a> tag.

    e.g.
    <a href="#" target="_blank">[icon type="facebook-square"]</a>

    Change the # with your own actual profile URL. Then paste this shortcode on a RAW content element on your page.

    Hope it helps, Cheers!

    April 14, 2016 at 11:05 am #882527
    scarter
    Participant

    Perfect. Thank you! If I wanted to change the size/color, how would I go about doing that?

    April 14, 2016 at 11:10 am #882536
    scarter
    Participant

    … and padding between icons?

    April 14, 2016 at 11:23 am #882551
    scarter
    Participant
    This reply has been marked as private.
    April 14, 2016 at 10:00 pm #883457
    Rue Nel
    Moderator

    Hello There,

    To change the color and size of the social icon, you can update your code and insert an inline css like this;

    
<a href="#" target="_blank">[icon style="color: red; font-size: 30px; padding: 0 5px;" type="facebook-square"]</a>

    Hope this helps. Please let us know how it goes.

    April 14, 2016 at 10:47 pm #883526
    scarter
    Participant

    Worked like a charm. Thank you!!

    April 15, 2016 at 4:45 am #883992
    Rue Nel
    Moderator

    You’re welcome!
    We’re glad we were able to help you out.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-881361 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>