There are the 3 general steps:

1. Set the CSS class name
2. Upload an image to your WP media library to use as a bullet image.
3. Add a CSS to display that bullet image to your custom bullet list.

Here is the tutorial:

Step 1: Set a class name

Log in to your WP dashboard and go the page / post where you would like to put the bullet. In this tutorial, we will create a new page.

In the Visual tab, add normal bullet by highligting the text and click on Bulleted List.


After that, click on Text tab to see the codes, this time set the CSS class. In this example we use the class “mybullet“. Please note that you can set any name that you want to have as long as it is not being used by other CSS classes within your website yet.


Then publish or update your page. Preview your site and you should see the normal bullet in the meantime.


Step 2: Upload an image to your Media Library

You can do this by going to Media > Add New. Click on Select Files button to upload your bullet image. Once uploaded click on edit button


and copy the file URL:


Step 3: The final step is to add a simple bit of CSS to your theme’s style-sheet (Appearance > Editor). We can place now the CSS in the Canvas Child: Stylesheet (style.css)

ul.mybullet li {
list-style-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-GOES-HERE');
}

Update the CSS file. Go to your bullet page and refresh.


Note that the icon images you use for custom bullets should be small; 16×16 pixels is ideal. You can get free bullet icons from these websites:
http://www.famfamfam.com/lab/icons
http://www.freeiconsweb.com

Leave a Reply

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