Using custom image files

  • Resolved lococola

    (@lococola)


    5 years, 11 months ago

    This may be incredibly basic, but I’m having problems figuring out how to use my own images as buttons under posts. I have some PNG files that I want to use as buttons, but I can’t figure out how to get that working.

    I am not using FontAwesome, so I have disabled those 2 options. And I am using the manual option in combination with a shortcode.

    This gives me 4 small grey squares under each post. But how to replace those for my images? I have tried it with CSS but it seems very cumbersome. Wondering if there is an easier way.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    You should be able to do this with CSS–yes, it will be a bit repetitive as you need to add rules for each button, but I got it working roughly with this:

    
.scriptlesssocialsharing-buttons .button:before {
	display: inline-block;
	vertical-align: middle;
	content: ' ';
	height: 20px;
	width: 20px;
	background-size: 20px;
}

.scriptlesssocialsharing-buttons .facebook:before {
	background-image: url(path-to-your-image);
}

    It’s pretty similar to the default plugin style, styling the :before pseudo element. You could also add the background to just the button itself, but that seemed to require more work. HTH

    Thread Starter lococola

    (@lococola)

    Hi Robin,

    thank you, this is much more elegant than my CSS experiments thus far. It’s working nicely now and looks great. Thank you for the quick support! ??

    Hi there, I tried using this but it isn’t working for me. It looks like the element names may have changed a bit, so I tried adapting myself but haven’t been able to get it to work. Any advice is much appreciated, thank you!

    Megan

    Plugin Author Robin Cornett

    (@littlerchicken)

    If you are using the new flexbox display option, which I think is preferable, the container class is now scriptlesssocialsharing__buttons (double underscore instead of the hyphen), so that may be what’s missing.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Using custom image files’ is closed to new replies.