I've set up an unordered list with bullet points created using FontAwesome, along with a background and border radius for added style.
My issue is that I want the second line of text to align below the first one rather than under the bullet point.
li::before {
display: table-cell;
padding-right: .3em;
content: "\f00c";
float: left;
margin: 0 9px 0 0;
font: 10px 'FontAwesome';
width: 20px;
height: 20px;
position: relative;
background: #3498db;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
line-height: 20px;
color: #FFF;
}
It seems like float: left is causing some conflict with display: table-cell.
Does anyone have any suggestions on how to fix this? -> jsfiddle