WordPress.org

Ready to get started?Download WordPress

Forums

Sugar and Spice
Social Media Icons not aligning (10 posts)

  1. Sam Bugeja
    Member
    Posted 2 months ago #

    Hi,

    I am trying to add tumblr/plus symbols to the social media widget..
    (http://fontawesome.io/3.2.1/icons/)

    I have followed the following tutorial (http://www.diybudgetgirl.com/2014/04/18/adding-social-media-icons-to-the-sugar-and-spice-theme/#comment-4455) but the alignment of my new social media buttons are incorrect.

    My site is http://www.beautifie.com

    Any help would be greatly appreciated!

    Thanks,
    Sam

  2. coreyscott
    Member
    Posted 2 months ago #

    Hi,

    Try adding the following to your custom css

    a.social-icon {
        vertical-align: middle;
    }
  3. Sam Bugeja
    Member
    Posted 2 months ago #

    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 :)

  4. SomewhatRounded
    Member
    Posted 2 months ago #

    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: http://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 :)

  5. Sam Bugeja
    Member
    Posted 2 months ago #

    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

  6. SomewhatRounded
    Member
    Posted 2 months ago #

    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!

  7. Sam Bugeja
    Member
    Posted 2 months ago #

    Ahh! Thanks so very much!!!!

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

    Any ideas?

    Thanks again,
    Sam

  8. SomewhatRounded
    Member
    Posted 2 months ago #

    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

  9. Sam Bugeja
    Member
    Posted 2 months ago #

    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

  10. SomewhatRounded
    Member
    Posted 2 months ago #

    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: http://monosnap.com/image/YYfQByigoaqeP2SzRA3Ekgw4TAFhvm)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.