I'm trying to do a list with icons. I want to align my text. Here is a jsfiddle to show my question:
<ul>
<li><i class="fa fa-phone"></i>lorem ipsum test<br>TEST<br></li>
<li><i class="fa fa-phone"></i>00 00 00 00 00</li>
</ul>
TEST is under the icon but I want to put it under the text. I tried with display:table-cell without success. I forgot to specify: the content is generate dynamically (with tinyMCE). So the user can't put HTML elements in the text (I don't want to). I need to write CSS rules to align the text automatically (like in a cell).
Do you have an idea please?
Thanks!
maybe so
ul{
list-style:none;
}
ul li{
position: relative;
padding-left: 20px;
}
ul li i{
position: absolute; top: 0; left: 0;
}<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<ul>
<li><i class="fa fa-phone"></i>lorem ipsum test<br/>TEST<br/></li>
<li><i class="fa fa-phone"></i>00 00 00 00 00</li>
</ul>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments