align text and icon CSS

Question

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!

Answer 1

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>

Answer 2

<ul>
    <li>
    <i class="fa fa-phone"></i>
        lorem ipsum test<br><span style="padding-left:18px"></span>TEST<br></li>
    <li><i class="fa fa-phone"></i>00 00 00 00 00</li>              
</ul>

this?

Answer 3

You can obtain result by

Position: relative;

Answer 4

I have solution for that.

<ul>
    <li>
        <i class="fa fa-phone"></i>
        <span>lorem ipsum test</span>
        <span class="new-line">TEST</span>
    </li>
    <li><i class="fa fa-phone"></i>00 00 00 00 00</li>              
</ul>

css:

.new-line {
    display: inline-block;
}

Answer 5

<ul>
    <li>
    <i class="fa fa-phone"></i>
        lorem ipsum test<br><div>TEST</div></li>
    <li><i class="fa fa-phone"></i>00 00 00 00 00</li>              
</ul>

In CSS

div {
    margin-left:15px;
}

Answer 6

use this html and css Demo

<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>

ul{
    list-style:none;
}
ul li  {
padding-left:25px;
}
ul li i{
margin-left:-13px;
}

Answer 7

Try like this: Demo

HTML:

<ul>
   <li><i class="fa"></i>
lorem ipsum test
        <br/>TEST
        <br/>
    </li>
    <li><i class="fa"></i>00 00 00 00 00</li>
</ul>

CSS:

li {
    position: relative;
    padding: 0 0 0 18px;
}
li:before {
    content:'\f03e';
    position: absolute;
    left: 0px;
    font-family:'icons';
}

and try to keep the font directory path and use appropriate path.