How to use custom icons in my unordered list?

Design help General
1

Hi there

does anyone know how i would put my own icons as bullet points in an unordered list??

Thanks for the help

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

No way by the ui (To change icon).

One Solution for now:

Pre Steps:

  1. Create list
    image
    image831×120 1.87 KB
  2. Remove bullets (none)
    image
  3. Add the same class for all of you list items
    image
  4. Upload .svg icon (Or png)
    image

Styles:

list (ul)

Remove left padding:
image

List item (li):

  1. Add extra left padding (space for the icon)
    image
  2. Set background image
    multi-line text and icon use this setting:

image
image771×459 26 KB

Set top value to 1px-5px (Tiny manually v-alignment). Because their is small gap between the text and the box (See the lines):
image

Done :slight_smile:

3 Likes
3

You can also have the icons as background images for the divs, so that way you just need to keep the classes consistent, instead of duplicating the same div over and over

1 Like