Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Change Lists From Dots to Blocks Or Other Characters

As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

Many times people want to have something more fancy for a unordered list than just the default dot.

Typical Unordered List

  • This
  • Is
  • The
  • Unordered
  • List
.my_bullet li {
   margin-bottom: 0px;
}

.my_bullet li:before {
    content: "\2714";
    color: #F0533A;
    font-size: 25px;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    list-style: none;
}

ul.my_bullet {
    list-style: none;
}

Example Unordered List Using My_Bullet Class

  • A
  • Modified
  • Bullet
  • Style

Dingbats Examples (Numbers)

All of the following could be used to generate unique lists where you choose the 4 digit number to use in the above example.

https://www.compart.com/en/unicode/block/U+2700

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

5 thoughts on “Change Lists From Dots to Blocks Or Other Characters

  1. Hi Josh, what code would I need to keep dots but to change them from black to a color, e.g. #ffa500. I get how to put the code into Acabado settings as I have done this with the checkmark example and it worked just fine.
    Also, what do I need to put in the Additional CSS for the block? Thank you.

    1. you would want to give them a class in the editor, then you can give color to the class which would allow you to target just that class and the ul (unordered list)

  2. Hey Josh, so I found U+2022 for bullet and it worked fine except the bullets weren’t positioned in the center of the adjacent text, very slightly higher, what am I doing wrong?

    1. When you use different icons they are placed at different places when people made them, some will work better than others. The only way to adjust would be working on a custom CSS specifically on that icon.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content