Keep second line indent on lists when using li:before

Hi, I’m using the below code to add a font awesome tick before each of my list items, however any text that runs on the second line isn’t indented like the first line and looks messy. Does anyone know a solution?


ul { list-style-type:none; }
ul li:before { content: '\f00c'; margin-right:10px; font-family: FontAwesome;  }
1 Like

Hey @macpheek. Do you have any live link for your code like CodePen? If so, please share it as it’s easy to check your code there.
Thanks.

I think setting the li to display: flex might do it. But it would be nice with a working example.

1 Like

Hi thanks for your reply. I’ve tried adding display:flex but it moves the text onto a separate line to the icon
I don’t have a code pen but I have a link to the page I’m working on

1 Like

You added it to the pseudo-element selector, try just adding it to the li selector. You have a li selector that is setting some margin, so try adding display: flex to that selector.

1 Like

@lasjorg’s answer is true. Remove display:flex; from the li:before pseudo element. Instead, add display:flex; to li element. It works like charm.

ah that worked, thanks so much!! :slight_smile:

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like