[Resolved] How can I add icons (or bullet image) to h3 headings? CSS code for this please

Home Forums Support [Resolved] How can I add icons (or bullet image) to h3 headings? CSS code for this please

Home Forums Support How can I add icons (or bullet image) to h3 headings? CSS code for this please

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1107275
    rossnmia

    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

    #1107278
    Leo
    Staff
    Customer Support

    Hi there,

    h3 isn’t a class so try h3 instead of .h3 for the CSS selector.

    #1107296
    rossnmia

    Yes thanks, tested without . already and still not working. Is there a better or easier way to add a small icon to the headings?

    #1107319
    Leo
    Staff
    Customer Support

    Can you link me to an example of what you’d like to achieve?

    #1108159
    rossnmia
    #1108162
    Leo
    Staff
    Customer Support

    Can you link me to the page where the screenshot is taken?

    #1108254
    rossnmia
    #1108289
    Leo
    Staff
    Customer Support

    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.

    #1108462
    rossnmia
    #1108735
    Leo
    Staff
    Customer Support

    No problem 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.