CODEWITHSUNDEEP
htmlcssalignment
Ty Yt
Ty Yt

Reputation: 466

align text and icon CSS

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!

Upvotes: 2

Views: 1022

Answers (7)

Priya Aanchal
Priya Aanchal

Reputation: 29

You can obtain result by 

Position: relative;

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

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.

Upvotes: 0

Kishan
Kishan

Reputation: 1190

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

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4501

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>

Upvotes: 4

ND17
ND17

Reputation: 208

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

Upvotes: 0

Srdjan Dejanovic
Srdjan Dejanovic

Reputation: 1409

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

Upvotes: 0

Reverter
Reverter

Reputation: 130

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

Upvotes: 0

Related Questions