Enlarge the social media icons

  • Author
    Posts
  • #2901360

    fteswl
    Member

    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 fteswl.com.

    #2901505

    dianakcury
    Member

    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

    #2901527

    fteswl
    Member

    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?

    #2901543

    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.

    #2901573

    fteswl
    Member

    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.

    #2901583

    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.

    #2901584

    fteswl
    Member

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

    #2901585

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

    #2901586

    fteswl
    Member

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

    #2901587

    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%;
    }

    #2901588

    fteswl
    Member

    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.

    #2901589

    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.

The topic ‘Enlarge the social media icons’ is closed to new replies.