Changing bullet icons from solid dots to hearts

  • Resolved adinl551

    (@adinl551)


    8 years, 9 months ago

    I would like the bullet points on my blog to be hearts. When I change the code int the custom css to the following:

    ul {
    list-style: none;
}

ul li:before {
    content: "\2665 020";
    color: #9c5597;
}

    here is a link to my blog https://lindasessentialwellness.com/
    The hearts are created but they are all over the blog in menus etc, when I only want them inside a post on the blog. The other issue the 020 shows up after all of the hearts.

    I am using the Virtue Theme any help with this would be greatly appreciated. I have just spent 4 hours trying to figure it out and I am no further ahead. Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

  • try to use more specific CSS selectors, like:

    .hentry ul {
    list-style: none;
}

.hentry ul li:before {
    content: "\2665 20";
    color: #9c5597;
}

    PS:
    there seems to be a issue with the forum editor – the correct ‘content’ line should be:

    content: "\ 2 6 6 5 \ 0 2 0";

    (no spaces)

    Hi adinl551

    I am a bit confused about your issue.
    When I see your site the heart icon is all over site.It is because of CSS:

    ul li:before {
    content: "\2665 020";
    color: #9c5597;
}

    Here 020 is due to content: “\2665 020”;.It should be changed to content: “\2665”;.
    Now can you specify or give us an screenshot in which part you want to display heart icon.

    Best Regards!!!!

    Thread Starter adinl551

    (@adinl551)

    Thank you to both of you,
    I believe both of your responses worked to achieve my goal
    Thank you so very much
    Have a great week ??

    Thread Starter adinl551

    (@adinl551)

    oops!! Sorry thought it had been resolved, the hearts did go in as bullets as you can see here
    https://lindasessentialwellness.com/2015/12/07/why-do-we-want-to-achieve-wellness/
    and they are no longer all over the front page, but they are throughout the blog post page
    https://lindasessentialwellness.com/blog

    Hi adinl551

    I found this CSS which is creating problem.

    .hentry ul li:before {
    content: "\2665";
    color: #9c5597;
}

    You either need to edit or remove this CSS.
    Or try this custom CSS instead:

    .single ul li:before {
    content: "\2665";
    color: #9c5597;
}

    Best Regards!!

    Thread Starter adinl551

    (@adinl551)

    Thank you once again it seems to now be working this is what I used and it has allowed it to work and not do all the other glitchy things,

    .hentry ul {
	list-style: none;
}

.single
.hentry  ul li:before {
	content: "\2665";
	color: #9c5597;
}

    Thank you for all of your help
    Best Regards,

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing bullet icons from solid dots to hearts’ is closed to new replies.