Enlarge the social media icons

• 

  fteswl · Member · Mar 20, 2017 at 5:00 pm

  • Copy link
  • Add topic to favorites

  On my main sidebar to the right side I have social media icons images that I want to enlarge. All of the social media icons: Twitter, facebook, YouTube, Instagram, iTunes and SoundCloud. I would like each icon to be about 100px

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

• 

  dianakcury · Member · Mar 20, 2017 at 6:47 pm

  • Copy link

  Hi there!

  Please try this CSS code, just change the value on font-size to the size you’d like:

  .widget_wpcom_social_media_icons_widget .genericon { font-size: 100px }

  Hope this helps

• 

  fteswl · Member · Mar 20, 2017 at 10:39 pm

  • Copy link

  Thank you Diana it worked on the main social media icons like YouTube,twitter,fb and ig. But it didn’t enlarge SoundCloud, iTunes or paypal. Any help for those?

• 

  thesacredpath · Member · Mar 21, 2017 at 5:50 am

  • Copy link

  Hi there, I’m not seeing a SoundCloud icon on your site right now. I do see the RSS widget with the SoundCloud stuff below the iTunes icon.

  Add this to increase the size of the iTunes icon.

  #text-7 a {
  	background-size: 100% auto !important;
  	max-width: 100% !important;
  	width: 100% !important;
  	height: 150px !important;
  }

  For the PayPal button, the button image you have is only 110px wide by 23px tall. I would suggest you download a larger donate button and upload that to your media library and then use that larger button instead.

• 

  fteswl · Member · Mar 21, 2017 at 6:25 pm

  • Copy link

  Thank you for your response. Soundcloud is an RSS feed. The iTunes logo code didn’t work. I will find a bigger picture for the paypal logo.

• 

  thesacredpath · Member · Mar 22, 2017 at 12:58 am

  • Copy link

  Hmmm, I added that code to your site in your customizer and it enlarged the image to nearly full width of the widget area. Can you try adding it again at the very bottom of your custom CSS and save it and then look? If it doesn’t work, leave the code in there and let me know and I’ll take a look again for you.

• 

  fteswl · Member · Mar 22, 2017 at 1:42 am

  • Copy link

  I saved it and it just shows the code. You can see the code.

• 

  thesacredpath · Member · Mar 22, 2017 at 3:35 am

  • Copy link

  Ah, sorry, that code is custom CSS. Go to Customize > CSS, delete all the informational text in that window, and paste in that code.

• 

  fteswl · Member · Mar 22, 2017 at 3:55 am

  • Copy link

  Thank you it worked. Is there anyway to enlarge the RSS feed and the donate button is only through finding a bigger image?

• 

  thesacredpath · Member · Mar 22, 2017 at 4:06 am

  • Copy link

  If I enlarge the donate button, it will get really fuzzy looking since we will be asking the browser to enlarge it and they don’t do a good job with that.

  On the RSS icon, it is only 14px square, so again we are asking the browser to make it larger. Add the following which makes it 1.5 times larger than it is and see what you think.

  #rss-4 img {
  	transform: scale(1.5);
  	margin-right: 5px;
  }

  On the Donate button, you can try this and see what I mean about image quality.

  #text-9 img {
  	width: 100%;
  }

• 

  fteswl · Member · Mar 22, 2017 at 4:32 am

  • Copy link

  Yeah I see what you’re saying. I rather it not be blurry like that but if I can enlarge it a little bit to where it isn’t blurry that would be great.

• 

  thesacredpath · Member · Mar 22, 2017 at 6:33 am

  • Copy link

  If you are talking about the donate button, try 90 or 95% for the width, or perhaps 75. On the RSS widget, 1.1 or 1.2, or 1.3? You can play with it and see how far you can go.