Adjusting Text alignment when using custom images as bullet points

Hey SarahKay09,

Could you post a link to where we can see the element you want to add this to please? Also, which image are you looking to use?

Best regards,
Rikard

Hi,
To use your image as a list bullet easily, please try these steps:
1: First add this css one time to your Enfold Theme Options > General Styling > Quick CSS field:

.custom-bullets li {
    list-style-type: none !important; 
    background: url(https://sarahkaydibble.com/wp-content/uploads/2018/09/Gold-Bullet-Square.png) no-repeat -1px 5px !important; 
    background-size: 20px !important;
    padding-left: 24px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 3px !important;
}

2: Then ensure you have custom classes enabled at: Enfold Theme Options > Layout Builder > Show element options for developers
3: Then in the text block where you want the custom image bullets to replace the standard bullets, create the bullet list & add the custom class “custom-bullets”

Now your bullets will show everywhere you use the custom class:

Best regards,
Mike

Hi,
I tested your arrow css on my localhost and it worked fine, Perhaps you added the dot before your custom class in the element? This is a common error, the dot should only be in the css rule.
Yet I would recommend against ending with the hyphen, try ending with a name of the image as it will be easier to remember:
custom-bullets-diamond
custom-bullets-arrow

If this doesn’t help please include the url to your test page and include a login so we can take a closer look.
To make the images bigger, please adjust this part of the code:
background-size: 20px !important;
but you may need to adjust the padding too.

I assume you are also clearing your browser cache and adding your css in the Quick CSS field?

Best regards,
Mike