How to align list Items with font-awesome icon next line text?

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

Late replay but check how I solved it.

ul li{ display: flex; padding: 10px 0; } 

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>

<ul>
  <li>
<i class="fa-solid fa-check"></i>
Font Awesome is the internet's icon library and toolkit used by millions of
designers, developers, and content creators.
  </li>
  <li>
<i class="fa-solid fa-check"></i>
Font Awesome is the internet's icon library and toolkit used by millions of
designers, developers, and content creators. Font Awesome is the internet's
icon library and toolkit used by millions of designers, developers, and
content creators.
  </li>
  <li>
<i class="fa-solid fa-check"></i>
Font Awesome is the internet's icon library and toolkit
  </li>
  <li>
<i class="fa-solid fa-check"></i>
Font Awesome is the internet's icon library and toolkit used by millions of
designers, developers, and content creators.
  </li>
</ul>

Answer 2

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

Answer 5

You are probably looking for st. like this.

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