Docs

[towncreek]

I added a custom social icon over the Pinterest field but can not get it to vertically align properly across all browsers.

I more or less got 18x18px version working by shifting things around with margins or extra transparent space in the icon but it was never perfectly aligned across all views. Currently I just have it as

.x-icon-pinterest-square:before {
  content:url(/path/image.png) ;
vertical-align:middle ;
 ;}

It looks pretty good across all browsers except Mobile is rendering like this: http://i.imgur.com/GmeRTBt.png

Due to the lower quality look of the icon when it’s scaled up higher than 18px when zoomed or on mobile, I made a larger version and tried to have it scale with the size of the font. I got it working perfect on Chrome desktop and mobile using the below code, but the original Pinterest icon still displays on IE/Firefox and I can’t find a way to do it for those browsers.

.x-icon-pinterest-square{
     content: url(/path/largeimage.png) !important;
display: inherit!important;
    width: 1em !important;
    height: 1em !important;
vertical-align:middle!important;
  margin-bottom:4px;
}

I tried modifying social.php to replace the Pinterest icon at the source but end up with the same problem.
if ( $pinterest ) : $output .= '<a href="' . $pinterest . '" class="pinterest" title="Pinterest" target="_blank"><img width=17 height=17 src="/path/image.png"></a>'; endif;
http://i.imgur.com/2iCgUM9.png

I would be OK with just using the lower quality icon, but is there a way for me to reliably vertically align the custom icon with the center of the circle?

[Friech]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[towncreek]

This reply has been marked as private.

[Christian]

It is aligned on my end. Please clear your browser history and check again.

Thanks.

[towncreek]

It’s working for me on desktop browsers and iPhones, yet on android Chrome browser it still sits at the bottom of the background circle.

[towncreek]

Without the vertical-align:middle; the icon sits at the top of the circle across the different platforms. Adding it seems to shift android to the bottom of the circle for some reason.

EDIT:
I seem to have got it working using the following instead of vertical-align

.x-icon-pinterest-square:before {
  content:url(http://image.png) ;
	position: relative;
	top: 0.2em;
	line-height: 1em;
 }

[Christian]

Glad you’ve sorted it out. 🙂

[Author]

Posts