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; }
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.
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
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.
@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!! 
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 (’).
