[PhotographerPCParticipant]

Greetings,

I just purchased the ethos theme and I am totally impressed by the functionality of this theme. My compliments to all involved in its development! My question is regarding the social icons. I would like to put them in a sidebar widget about the counter. I have used the following code and they do not appear.

<div class="x-social-global">
<a href="https://www.facebook.com/PatrickComtoisPhotography/" title="Facebook" target="_blank"><i class="x-icon-facebook"></i></a>

<a href="https://twitter.com/patrickwc" title="Twitter" target="_blank"><i class="x-icon-twitter"></i></a>

<a href="https://plus.google.com/+PatrickComtois/posts" title="Google+" target="_blank"><i class="x-icon-
google-plus"></i></a>

<a href="https://www.youtube.com/user/PatrickWComtois" title="YouTube" target="_blank"><i class="x-icon-youtube"></i></a> 

href="https://instagram.com/patrickwcomtois/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-
instagram"></i></a>

</div>

I see quite a bit of discussion on this topic in the forums, but none of the suggestions seem to work for my situation. I am developing the site in my sandbox. Here is the URL: http://patrickcomtoisphotography.com/sandbox/.

Any assistance you could provide would be great.

Many thanks.

[ChristianModerator]

Hey there,

Thanks for writing in and you kind words. Please use this code instead.

<div class="x-social-global" style="font-size:2em">
<a href="https://www.facebook.com/PatrickComtoisPhotography/" title="Facebook" target="_blank">[x_icon type="facebook-square"]
</a>

<a href="https://twitter.com/patrickwc" title="Twitter" target="_blank">[x_icon type="twitter-square"]
</a>

<a href="https://plus.google.com/+PatrickComtois/posts" title="Google+" target="_blank">[x_icon type="google-plus"]
</a>

<a href="https://www.youtube.com/user/PatrickWComtois" title="YouTube" target="_blank">[x_icon type="youtube"]
</a> 

<a href="https://instagram.com/patrickwcomtois/" class="instagram" title="Instagram" target="_blank">[x_icon type="instagram"]
</a>
</div>

You will need to use our X Icon Shortcode to output an icon. You can choose an icon type at http://fortawesome.github.io/Font-Awesome/icons/ except the new 4.4 icons (they haven’t been added yet). Do not include the fa- part so for example the code in FontAwesome is fa-instagram, you will use instagram only as the type [x_icon type="instagram"].

To increase the size of the icons, you can adjust the font-size of the icons container.

<div class="x-social-global" style="font-size:2em">

If it still doesn’t help, please give us access to your WordPress admin.

Thanks.

[PhotographerPCParticipant]

Great customer service and thanks for the prompt reply. The code provided did the trick and they are now showing. I would like to change the color of the icons (twitter -blue, google+ red and so on) and remove the underline from the icons. I am under the assumption that the CSS needs to include the underline display none and the color change may be something simple as well, but I am a newbie to coding. Once again thank you for the awesome support of your themes.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.x-sidebar .x-social-global a {
    text-decoration: none;
}
.x-sidebar i.x-icon.x-icon-facebook-square {
    color: blue;
}
.x-sidebar i.x-icon.x-icon-google-plus {
    color: #FF2A13;
}

.x-sidebar i.x-icon.x-icon-twitter-square {
    color: #00ABF0;
}
.x-sidebar i.x-icon.x-icon-youtube {
 color: #FF2A13;
}
.x-sidebar i.x-icon.x-icon-instagram{
color:#CFE0E0
}

Hope it helps.

[PhotographerPCParticipant]

All works well. You guys have been great in assisting. It is much appreciated. Can’t thank you enough.

[NicoModerator]

You’re most welcome.

Have a great day! 🙂

[Author]

Posts