Hi, are there any ways to change the icon for unordered list?

Helpdesk Website Builder
1

Hi,

I tried to change the unordered list icon to a font awesome icon, however, it overlaps the current one rather than replace it.

<ul class="fa-ul">
   <li><i class="fa-li fa fa-check-square"></i>Content 1</li>
</ul>

Does anyone have any idea what did I miss out on?

2

Hi @Adrian_Chen,

you can change the icon with CSS. Just add the following CSS code:

.ed-text ul li:before {
content: “\f14a”;
}

You have to add the Icon Unicode to the icon at “content”, which you can find at Font Awesome. For the CSS the Font Awesome version 4.7 is used: Font Awesome Icons

1 Like
3

Thanks Dominik!

I realised that this affects all UL on the page. How do I apply different icons to different UL on the same page? Tried creating a different class and apply to it, but couldn’t work.

4

I’ve got it covered. Separately declared a class for the Ul and another class for the Li and apply on the specific UL.

Thanks.

5

How do I style this to be a different size from the default text size?

6

Have you tried this, @Lisa_Tippette ? :slight_smile:

How do I style this to be a different size from the default text size?

7

Yes, but that doesn’t tell me how to change the SIZE of the bullet. I know I need to put something else in the CSS but I’m not sure what/how.

Thanks,
~Lisa

8

Still looking help on this if anyone else has any solutions. Thanks!

9

Hi @Lisa_Tippette,

you could add the font-size property to change the size of the icon and maybe you also have to adjust the width of the element (just if the icon is overlapping with the text)

e.g.

.ed-text ul>li::before {
    color: #f45f0b;
    content: "\f14a";
    display: inline-block;
    font-family: FontAwesome;
    margin-left: -1rem;
    font-size: 2rem;
    width: 3rem;
}
1 Like