How to increase size of icons on social media icons widget

• 

  octanage · Member · Feb 1, 2018 at 5:35 am

  • Copy link
  • Add topic to favorites

  I followed the instructions set by Jetpack: https://jetpack.com/support/extra-sidebar-widgets/social-media-icons/

  However, the CSS code provided is not making any difference:
  .widget_wpcom_social_media_icons_widget .genericon {
  font-size: 16px;
  }

  What am I missing?

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

• 

  mommyhive · Member · Feb 1, 2018 at 8:30 am

  • Copy link

  Hi there,

  Please check if the @sacredpath-happiness engineer reply in the below thread if of any help.
  https://en.forums.wordpress.com/topic/changing-size-of-social-media-icons-in-widget?replies=5

  When I looked into your site, I didn’t find any social media widget. The below link would be of help in configuring the same.
  https://en.support.wordpress.com/widgets/social-media-icons-widget/

  Hope that helps.

  Thank you.

• 

  thesacredpath · Member · Feb 1, 2018 at 6:10 pm

  • Copy link

  Hi @octanage, are you by chance talking about this self-hosted site: https://octanage.com/? If so, you can add this custom CSS and adjust the font size for the social icons as desired.

  .fa {
    font-size: 20px;
  }

  For self-hosted WordPress sites such as this, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org forums. There is a dedicated OnePress support forum at WordPress.org. These forums are for those hosted here at WordPress.com.

  If you haven’t already, you will need to create a username and password at WordPress.org as it is not connected to your account here at WordPress.com.

  The differences between WordPress.com and WordPress.org.

• 

  octanage · Member · Feb 1, 2018 at 10:53 pm

  • Copy link

  Thanks team for the suggestions! Problem solved.
  I had spent a few hours reading threads in forums, support articles, etc. Hopeless, I asked for help here.

  PROBLEM: Even though I had already added the custom CSS code below, the social icons size wouldn’t change

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

  DIAGNOSE: by inspecting the code on the page, I learned that in the CSS code of the theme I’m using there was another code “superseding” the code above:

  .sidebar .widget a {
    color: #777777;
    font-size: 14px;
  }

  Once I removed
  /* font-size: 14px; */

  the custom CSS code took over and fixed the problem.

  Hello @iamrishaan,
  thanks for looking into!
  page I changed is https://octanage.com/entrevistas_podcast/, with the social icons on the bottom of the sidebar.

  Hello @thesacredpath,
  interesting approach! Thanks for sharing the insight.

• 

  thesacredpath · Member · Feb 14, 2018 at 8:55 pm

  • Copy link

  Hooray and you are welcome!