Archived topic
How can I add icons (or bullet image) to h3 headings? CSS code for this please
9 replies · Started by rossnmia on December 17, 2019
I added this code to try and get icons to show to the left hand side of h3, h4, h5 and h6 settings
.h3 {
background: url(https://tinytodolist.com/wp-content/uploads/2019/12/Arrowicon.png) no-repeat left transparent;
padding-left: 15px;
}
}
Not working so far, please help thanks :-0
Hi there,
h3 isn't a class so try h3 instead of .h3 for the CSS selector.
Yes thanks, tested without . already and still not working. Is there a better or easier way to add a small icon to the headings?
Can you link me to an example of what you'd like to achieve?
Like this https://tinytodolist.com/wp-content/uploads/2019/12/icons.png in tinydodolist.com
Can you link me to the page where the screenshot is taken?
Sorry I was wondering if you've seen a live example of this being done. I assume the screenshot is photoshopped?
I'm not aware of a good way to add a png icon before headings automatically unfortunately - it's usually done with font icon or some sort.
You can add it in manually like this though:
<img src="https://tinytodolist.com/wp-content/uploads/2019/12/Arrowicon.png class="heading-icon"><h3>Title Text</h3>
If you can find an actual/live example of this png icon being done with CSS, I can likely tell you how they did it.
https://wpsites.net/wordpress-tips/add-icon-before-or-after-entry-title/ ok Ill just use that code thanks
No problem :)
