如何将列表项与font-awesome图标下一行文本对齐？

Question

A picture paints a thousand words. The text on the next line needs to align on same margin as above.

HTML:

<ul>
<li>
<p><em class="fa fa-square"></em><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</span></p>
</li>
</ul>

CSS:

ul{
    display: table;
    a{
        padding-left: 10px;
    }
    span{
        padding-left: 10px;
    }
}

Update:

After @panther update:

It is acceptable, however the fontawesome icon is now off centre.

Answer 1

You can try to use font awesome's built-in solution for lists :

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

---

In your case, the code will change to something like this:

<ul class="fa-ul">
  <li><i class="fa fa-square"></i><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</li>
</ul>

Answer 2

You are probably looking for st. like this.

em {float: left;}
a, span {margin: 0 0 0 20px; display: block;}

Answer 3

Why not do these:

1. Apply position with a property value of relative to li to avoid overlap

2. Insert the square with :before selector and add position with a property value of Absolute o its block of CSS .

That way you can position it as needed. You have top , bottom , left , and right properties to work with as you position it.

HTML

<ul>
<li>
<p>Some important text are to be place here. 
It may or may not longer than the text we have here. You never know.
    </p>
</li>
</ul>

CSS

 ul{
      list-style-type: none;
   }

   li  {
       position: relative; /* Will help curtail overlap */
      padding-left: 20px; /* Reserves a space for the square dot */
    }

    li:before {   
       content: '\f0c8';
       position: absolute;
       left: 0; /* Places the square dot at the space created by the LI padding */
       font-family: fontAwesome;
     }

See working example here

Answer 4

i think you are expecting like this

Fiddle

http://jsfiddle.net/myYUh/88/

I have added some example found on jsfiddle, i work around little bit. it might help you.

CSS

.icons-ul{  
    width:100px;
}

.icons-ul>li {
position: relative;
}

icons-ul {
margin-left: 2.142857142857143em;
list-style-type: none;
}

ul, ol {
margin-top: 0;
margin-bottom: 10px;
}

.icons-ul .icon-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
text-align: center;
line-height: inherit;
}

[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}

HTML

<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
  <li><i class="icon-li icon-ok"></i>Buttons</li>
  <li><i class="icon-li icon-ok"></i>Button groups</li>
  <li><i class="icon-li icon-ok"></i>Navigation</li>
  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul>