Replacing bullet list squares and circles with arrows and symbols

Bullet lists are a convenient way to organize information in a well-structured format. But the options square, circle and disc symbols can be boring and leave a lot to be desired in the way of design. This is especially true if your list will be displayed on the homepage or sidebar where you really want things to looks nice. This tutorial shows you how to change a boring list like this:

  • Item one
  • Item two
  • Item three

Into something like this:

  • Item one
  • Item two
  • Item three

Or this:

  • Item one
  • Item two
  • Item three

The bottom two examples are achieved by adding ASCII special characters to the <ul> element in CSS. First you’ll need to add a class to the <ul> element like this:

<ul class="special_bullet">

This can be done by switching from the visual editor in WordPress to the text editor. Now you just need to add the CSS either in your style.css or if you are using Elegant Themes you can add it to the CSS box in the Epanel. This is what you’ll add:

ul.special_bullet {
list-style: none;
}

ul.special_bullet li:before {
color: #000;
content: "\27bd \0020";
}

The first style removes the bullet from the list. The second style adds a color value and the symbol. The first ASCII character \27bd creates the symbol. The \0020 adds a space after the symbol for separation. You could also add a font-size: 30px; for example to make the symbol larger.

For more symbols, check out this great website: https://websitebuilders.com/tools/html-codes/dingbats/. There are two codes given for each symbol on this site. You’ll want to use the bottom code. But you only use the four characters between the [x] and [;] . For example, the code given for the arrow in the example above is &#x27bd; but we can’t use that in CSS. Remove everything before and including the x and remove the ; and then add a \ in front to make it this: \27bd.

This is a quick and easy way to add a little flare to your bullet lists. Your options are a little limited but much better than the default square, circle and disc. If you can’t find a symbol that meets your needs, you could always use a custom image by adding this code to your CSS:

ul.special_bullet
list-style-image: url(‘image-name.gif’);
}

Just replace image-name.gif with an image of your choosing that you’ve uploaded to your site. You can find the URL of that image by going to Media in the WordPress Dashboard and clicking the Edit button of the image you want to use. In the upper right corner of the screen you’ll see the File URL. Copy and paste that between the single quotes in the example above. You’ll obviously want to use a relatively small image like 16 x 16 px.

    21 Comments

  1. Hi this works great. The only problem is that when the bulleted text is longer than one line, it doesn’t indent the text on the next line. How do I solve that?

    Storm

    May 30, 2016

    • Using the classes in the example above, try this:
      ul.special_bullet li {
      text-indent:-15px;
      padding-left:15px;
      }

      You might have to play with the numbers a little depending on the size of the symbol

      Brad (admin)

      June 2, 2016

      • It worked like a charm, thank you Brad. I appreciate it!

        Storm

        June 7, 2016

  2. did not work for me i have problem in console its telling me cannot find the file 404 error.It might be my permalinks do you know how i can fix this?

    Jacques

    October 16, 2016

  3. If I put this in the CSS – this will change the bullets for the whole website, correct? What if I just want to change it on just a specific page?

    Teresa Martin

    January 12, 2017

    • Ok, I worked out I can put it in the Text Module Settings – Customs CSS but which part do I put it in – CSS ID, CSS Class, Before, Main Element or After?

      I also tried putting it in content and switching to the text tab but then it showed up in the content….

      sorry I am confused

      Teresa

      January 12, 2017

      • You probably won’t be able to use it in the Custom CSS section. That only lets you target the text container, not the bullet lists within the text container. You’ll have to add it to your child theme’s stylesheet or add it to the custom CSS section at the bottom of the Divi Options page.

        Brad (admin)

        March 20, 2017

        • I’m using Divi (had to learn it because a client’s website builder got fired and I had to jump in!), and I’m dying to use this capability but like Teresa I’m confused about where exactly you are saying to put which code, such as in the “Advanced” tab of the Text Module vs somewhere else.

          Really want to use this, but I’m lost from step 1 – when you say “add it to the custom CSS section” in your reply above, by “it” do you mean this part: ?

          Because I tried that as my step 1 and got error messages about inappropriate characters (such as the <) in that CSS section. Can you be VERY specific about what goes where, for us eager but somewhat struggling Divi novices?

          Thank you!!

          Lynn

          June 14, 2018

          • Hi Lynn. You’ll add the class “special_bullet” to the HTML using the text editor. Make sure you’re in text mode, not visual mode. For the CSS, you’ll need to add that to the stylesheet in your child theme or in the Custom CSS box located in the Divi -> Theme Options page found in the left sidebar of WordPress admin. Here is a tutorial on how to create a child theme.

            Brad (admin)

            June 14, 2018

    • No, it will only apply to bullet lists with the class “special_bullet”. If you want to use this in your sidebar but don’t want it to apply to all pages, you can add the page class to the beginning of the CSS. It would look something like this:

      .page-id-308 ul.special_bullet, .page-id-420 ul.special_bullet {
      list-style: none;
      }
      .page-id-308 ul.special_bullet li:before, .page-id-420 ul.special_bullet li:before {
      color: #000;
      content: “\27bd \0020”;
      }

      This will only apply to two pages/posts. You’ll just have to look at your body classes for the pages you want to show it to determine the right class.

      Brad (admin)

      March 20, 2017

  4. What do I do with an icon that has less than 4 characters between “x” and “;” …namely:
    $
    ?

    Ella

    February 28, 2017

    • Sorry, the icon reference converted into the dollar sign, but it should actually be an arrow!

      It is “&#x” then “24” then “;”

      So the only characters between “x” and “;” are “24”.

      Ella

      February 28, 2017

  5. It works great on pages, but can I get it to work on posts also?

    Liesbeth

    April 25, 2017

  6. Is it possible to use Font Awesome icons instead of the dingbats?

    Kim

    June 16, 2017

    • I’d love the info on font awesome too.

      Rich

      December 27, 2017

  7. ul.special_bullet
    list-style-image: url(‘http://wbic.org.uk.gridhosted.co.uk/wp-content/uploads/2018/01/Westcott-BIC-favicon_40px.png’);
    }

    Why us this not working in my CSS code as you advised above

    Naomi Pelled

    February 6, 2018

  8. Do I replace one of these:

    ul.special_bullet {
    list-style: none;
    }

    ul.special_bullet li:before {
    color: #000;
    content: “\27bd \0020”;
    }

    with this:

    ul.special_bullet
    list-style-image: url(‘url/to/my.gif’);
    }

    ?

    I can’t get my custom gif to show up.

    CHris

    March 3, 2018

  9. For some reason, the color field is not working on mobile. I tried to change the color to a shade of green (which works on desktop) but on my phone, it is always gray for some reason.

    Trevor

    July 28, 2018

    • add font-family: ‘Zapf Dingbats’; and the color will show up on mobile as well.

      Like below:

      ul.special_bullet li:before {
      font-family: ‘Zapf Dingbats’;
      color: #000;
      content: “\27bd \0020”;
      }

      Cheers

      Matthijs

      August 14, 2018

  10. Hi. Thank you for this post. I was successful in getting the Zapf Dingbats bullet I wanted. I wasn’t successful in getting the lines when they wrap to indent. I used the code you gave

    text-indent:-15px; padding-left:15px;

    When I play with the numbers, the padding-left moves. When I go to change the text-indent number, nothing happens.

    I am pretty new to CSS so bear with me. I do not believe I have any padding in the module that would be affecting this – but I could be wrong.

    It’s sort of driving me crazy.

    Thanks in advance,
    Michele

    Michele Sager

    January 21, 2019

Post a Reply

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

Pin It on Pinterest

Share This