Streaming live at 10am (PST)

How to control List's bullet size?


#1

Hello friends!

I'm just trying to make a list but stuck in ordering by dots.
Can somebody show me how to do that in webflow?

I tryied to do a list item in webflow but circles are too small. How to list it as in picture usinf AWESOME font. Is it possible?
Thank you


#2

I did it by putting 2 columns inside a div and 2 text blocks inside each column. I guess it is wright


#3

Hi Abbas,

List bullets size is defined by the font-size of the List Item <li>

So yes, they are too small for modern design trends.

And when you increase text size to get bigger bullets, the text becomes too big.

What you can do to get more control is to rely on CSS to style the items as you like.

First steps is to remove the default disc...

...and to remove the default padding of the List.

Now, you can add a padding to the List Item, and use any image as a background for your bullet.


No image? No problem. Here's another solution that doesn't even need a padding.

Don't use a special font, rather find a UNICODE CHARACTER that suits you and paste it in front of the text. Unicode characters are in every font.

Find all the unicode characters here, simply copy and paste them. http://jrgraphix.net/r/Unicode/25A0-25FF

This last solution isn't really good as you have to paste the character on every line and the symbol i going to be copy/pasted with the text. Just an occasion to show you what Unicode characters are. There is a clean way to use those symbols with CSS though, with pseudo-elements (:before), but you'd need custom code for that.


Edit: you can find SVG things to use with the first solution here: https://thenounproject.com/search/?q=dot


#4

Thank you very much!
I inserted a span text and changed it to awesome font.