Need help with changing icons to customs with css

  • Unknown's avatar
    teatimepodmarketing · Member ·

    Trying to do this on wordpress without a plugin. I have custom pngs that I am trying to replace current icons and elements with and it will be in a lot of different places on the site so I would really appreciate help with figuring out the best way to do this. At the moment, it doesn’t seem that I can upload any svg’s onto WP so I would love to be able to upload higher quality png’s and resize them but with my current code I am not finding any way to resize the content. So my first workarounds were to upload the images at the correct size but quickly realized I was going to have to upload many different versions of the same icons. Is there a different way to replace WP’s icons with my own and allow for resizing?

    Current code is….

    /* Bottom Social Block */

.wp-block-social-links.is-style-logos-only .wp-social-link-youtube {

visibility: hidden;
}

.wp-block-social-links.is-style-logos-only .wp-social-link-youtube:after {

content: url('https://teatimewithgabbylambandharperrosedrummond721771504.files.wordpress.com/2023/01/youtube.png');
visibility: visible;
}

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

  • aleone89 · Staff ·

    Hello there!

    Happy to help you with this.

    Is there a different way to replace WP’s icons with my own and allow for resizing?

    You’re on the right track with the code…

    To resize, you could manually add the query into the image link itself… so for example: 

    content: url('https://teatimewithgabbylambandharperrosedrummond721771504.files.wordpress.com/2023/01/youtube.png');

    Would become…

    content: url('https://teatimewithgabbylambandharperrosedrummond721771504.files.wordpress.com/2023/01/youtube.png?w=50');

    You’d be using the same image, but dictating the size in the CSS.

    I hope this is useful.

  • The topic ‘Need help with changing icons to customs with css’ is closed to new replies.