Li item on two lines. Second line has no margin
This is because the tick is inline content so when the text wraps it will continue to flow as usual.
You can stop this behaviour by taking advantage of text-indent:
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.
text-indent (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.
In the following example a value of 1.28571429em is used because it is the width set on the .fa-fw by font-awesome.
ul {
width: 300px;
}
li {
padding-left: 1.28571429em;
text-indent: -1.28571429em;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>you can just add this to your ul:
ul {
text-indent:-20px;
margin-left:20px;
}
JSFIDDLE
You could remove the check out of the page flow by setting them with position:absolute
ul {
width: 300px;
}
.fa-fw {
position: absolute;
left: -22px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>