multiline listitem with aligned fontawesome icon

Question

i am making a list of items with the <li> tag and different FontAwesome icon for each list item in twitter bootstrap. i tried to make the list test center vertically, but cant this way

<ul class="middle">
<li>
 <a href="#">
  <i class="icon-cog icon-2x"></i>
   very long multiline item one</a>
</li>
<li>
 <a href="#">
  <i class="icon-pencil icon-2x"></i>
    very long multiline item two
 </a>
</li>
</ul>

which produced

this is what i want to achieve

How can i achieve this?

Answer 1

Is this what you are looking at
http://jsbin.com/iFaWoYa/1/

ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}


<ul class="middle">
  <li>
    <i class="icon-cog icon-2x"></i> <a href="#">very long multiline item one</a>
  </li>
  <li>
    <i class="icon-pencil icon-2x"></i> <a href="#">very long multiline item two</a>
  </li>
</ul>

Answer 2

You may set "position:relative" to <a> tag and "position:absolute" for <i>. Then add "padding-left: <size of your icon>" to <a> and "display: block" or "display: inline-block" because without "position" it would not work. And maybe "top: 0" and "left:0" to icon for right positioning;

Answer 3

Try using pull-left on the icon:

<li>
 <a href="#">
  <i class="icon-cog icon-2x pull-left"></i>
   very long multiline item one</a>
</li>

Demo: http://bootply.com/86079