Social Media Icons not aligning

Hi,

Try adding the following to your custom css

a.social-icon {
    vertical-align: middle;
}

Hi,

Thanks very much for your quick response!

So it looks like none of the social media icons are now showing up and I’m really not sure why ??

I just want to add a tumblr icon and plus icon within the social media widget.

Thanks ??

The Google+ is already an available option (unless you wanted a different icon, then my bad!)

They could have been mis-aligned if the image you were using wasn’t the same size as the other icons, but if you were just using the one already available it should have worked! With it not showing up at all, I would recommend checking your social-widget.php file again and just making sure everything is there (and got changed properly, like no ‘facebook’ where tumblr should be, etc.) — I was able to get it going, if this is what you were going for: https://dev.somewhatrounded.com/

There are a few places in social-widget where the new lines have to be created to get everything going correctly, but if it’s still not lining up when you get the icon there, I can give you a hand ??

Seemed to have fixed the problem of alignment (not sure how), although the only problem now is that the plus sign is showing up all weird?

Any ideas.

Sorry to be a pain!

Thanks,
Sam

Whatwhaaaat

I think I’ve gotten it! In your child theme, if you have header.php, add in this line before the closing head tag (</head>):
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

It seems like it’s just something to do with the way the theme uses the font, so if you add that into your header and then the class for your icon that you added from the tutorial, would be “icon fa fa-plus”

Now it should be there!

Ahh! Thanks so very much!!!!

Although if you took at look it’s still a tiny bit misaligned?

Any ideas?

Thanks again,
Sam

A smidgeon, due to the two different setups!

It’s a bit hacky, but instead of re-doing all of the icons you could add this to your css:

.fa {
    line-height: 30px !important;
    margin-top: 5px;
}

One day you’ll have all of your icons, and have them aligned! haha

Haha I know, such a small issue but so annoying.

I added it to my style.css file but it didn’t seem to work. Should I give up?

Thanks!
Sam

Nope, quitters never win! ha

That one was actually my bad, the styles there are coming from the Font Awesome stylesheet which is higher in the hierarchy of stylesheets to listen to than your style.css, so if you go to your social-widget.php and add the styles inline there (right in the tag), like style="line-height: 30px !important; margin-top: 5px;"

Or, what would likely be easier at this point would be to go to your social-widget.php file and just replace the existing icons with new ones from FontAwesome. So every time there’s an icon-something, replace the icon with fa (here’s a screenshot: https://monosnap.com/image/YYfQByigoaqeP2SzRA3Ekgw4TAFhvm)