Changing size of social media icons in widget

  • Unknown's avatar
    commutinggirl · Member ·

    Hi everyone,
    I’ve been trying to change the size of the social media icons (make them bigger to 22px) but so far can’t figure it out, I tried this:
    .page.genericon {font-size: 22px;}
    But it doesn’t seem to work.
    Thanks a lot for your help!

    The blog I need help with is: (visible only to logged in users)

  • ehtis · Staff ·

    Hey Elodie!

    Are you talking about the social media icons in your sidebar?

    If so, try this code:

    .widget_wpcom_social_media_icons_widget .genericon {
  font-size: 22px;
}

    Adjust ‘font-size’ according to your liking. :)

  • Unknown's avatar
    commutinggirl · Member ·

    Thanks! However for some it is still not working :( I managed to change the colors and size of fonts but this one is being stubborn.
    Any other tips by any chance?

  • ehtis · Staff ·

    Hmm, you have three icons in your sidebar – Facebook, Twitter and Instagram.

    Are you saying code above doesn’t change the size of these? Let me know if I missed any other icon/widget.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the social icons are actually added using a :before pseudo class, for each individual icon, so your CSS would need to look like this 

    .genericon-facebook::before, .genericon-twitter::before, .genericon-instagram::before {
    font-size: 150%;
}
.widget_wpcom_social_media_icons_widget ul {
    padding-top: 5px;
}

    You can adjust the side as desired. In the above, I also added just a bit of top padding to space them down off the red header background rectangle. See what you think.

  • The topic ‘Changing size of social media icons in widget’ is closed to new replies.