Docs

[ylpl]

Hi there,

I checked the archives to install social media buttons at the top of my main sidebar at http://dev.ylpl.net/wordpress/ and even though the margins and dimensions are perfect the icons are still missing. Would you be able to help out with this?

Thanks,

Daniel

[Friech]

Hi Daniel,

Thanks for writing in! Would you mind sharing with us the code/shortcode you use for your icons? Or provide us login credentials in private reply so we can take a closer look.

Cheers!

[ylpl]

Hi there,

I applied this HTML code to my text widget:

<div class="x-social-global">
<a href="#" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-icon="http://dev.ylpl.net/wordpress/wp-content/uploads/2016/09/icon175x175.png"></i></a>
<a href="#" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-icon=""></i></a>
<a href="#" class="Instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-icon=""></i></a>
<a href="#" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-icon=""></i></a>
</div>

As you can see, I uploaded an image for Facebook and plugged in the URL for my data-icon but that was still unsuccessful.

The CSS Code I applied was:

.widget .x-social-global a {
    margin-top: 0px;
}
.widget .x-social-global a {
    color: #ffffff;
    background-color: #1abc9c;
    margin-left: 6px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 18px;
    text-shadow: none;
}
.widget .x-social-global a:first-child {
    margin-left: 0px;
}
.widget .x-social-global a.foursquare {
    font-size: 17px
}

It’s set up pretty much how I want it but the icons are missing. Would you be able to let me know what I did wrong or what I’m missing?

Thanks,

Daniel

[ylpl]

Good News! I seemed to have fixed the problem. There’s just one nagging little thing which is in the Title Bar of my Text Widget: there’s a “greater than” symbol in front of “Follow the Library.” Any way to get rid of that?

Thanks again,

Daniel

[ylpl]

Also, is there any way to provide additional spacing between each social media icon?

Thanks again!

Daniel

[Jade]

Hi Daniel,

You can add this under Custom > CSS in the Customizer.

.widget .h-widget:before {
    display: none;
}

#text-12 .textwidget a {
    display: inline-block;
    margin-right: 8px;
}

[ylpl]

That did the trick. Thank you so much, I really appreciate it! 🙂

Daniel

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts