Image before widget title
-
Hallo. I’m trying to add 3 images before my footer’s widgets, it would be the respective icons for the social media like in the second image here: https://imgur.com/a/vSpZFmI
I’ve already managed the css for the images, but I can not figure out how to use a class and id to add it before each specific title.
{content:url(https://irinasopas.com/wp-content/uploads/2019/05/facebook.svg);}
Can someone help me?
best regards,
Irina
The page I need help with: [log in to see the link]
-
This code will add the image before the title of the widget, but you’d need to figure out how to drill down further since they all have the same css class settings.
h3.widgettitle::before { content: url("https://irinasopas.com/wp-content/uploads/2019/05/facebook.svg"); }Hum… Using the widget id won’t work?
Oh, I didn’t even notice that; then sure here you go:
#custom_html-2 h3.widgettitle::before { content: url("https://irinasopas.com/wp-content/uploads/2019/05/facebook.svg"); }Just be sure to change the widget ID and the image URL.
That worked, you’re amazing GIRL! :D. There is anyway to change the images size? They’re appearing too big, I’m using svg.
Regards,
Irina
You can add this which will size all of them:
h3.widgettitle::before { display: block; height: 50px; width: 50px; margin: 0 auto; }You can adjust the height/width to your liking.
Thank you so much dear, is working like a charm. Now I need to learn how to use jquery to add a link on those images.
I wish you a very nice weekend.
The topic ‘Image before widget title’ is closed to new replies.