Custom Social Icon

[Poebelbraeu]

Hi there,
i want to add a social icon “Untappd” to the topbar content.
I got as far as to add the icon via CSS as modification of the rss icon.
But still, the icon is of different size, blurry, not aligned and the hover title still shows RSS.
Could you please help me fix this.
HP is www.poebelbraeu.com

Thx,
Georg

[ruenel]

Hello Georg,

Thanks for writing in! To resolve your issue, please have your custom css code updated and use this insteadl

.x-icon-rss-square {
    position: relative;
    width: 20px;
    height: 20px;
}

.x-icon-rss-square:hover {
    opacity: 0.4;
}

.x-icon-rss-square:before {
    content: " ";
    background-image: url(https://www.poebelbraeu.com/wp-content/uploads/2018/05/Untappd_logo_bw_24x32px.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

Hope this helps. Kindly let us know.

[Poebelbraeu]

Thanks for the quick reply!
Unfortunately, it does not solve any issue for the header top bar (top right). Instead now it is more disalligned:

For the footer it seems pretty good but still not perfectly aligned:

What about the hover text “Untappd”
Thanks alot!

[rad]

Hi @Poebelbraeu ,

Please change this existing CSS

.x-icon-rss-square:before {
    content: url(https://www.poebelbraeu.com/wp-content/uploads/2018/05/Untappd_logo_bw_24x32px.png);
    margin-right: 5px;
}

to this

.x-icon-rss-square:before {
    content: "";
    margin-right: 5px;
    background: url(https://www.poebelbraeu.com/wp-content/uploads/2018/05/Untappd_logo_bw_24x32px.png);
    display: inline-block;
    width: 17px;
    height: 17px;
    background-size: cover;
    position: relative;
    top: 1px;
}

And I noticed that you didn’t implement the above CSS. Please make sure this last CSS is implemented.

As for the hover text, please add this code to your global custom javascript

jQuery('.x-icon-rss-square').parent().attr('title','Untappd');

Hope this helps.

[Poebelbraeu]

Worked perfectly! Much appreciated!