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.

    13 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

    • 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

Post a Reply

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