tread
tread

Reputation: 11108

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

Align font-awesome icon list item with span

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:

Aligning list items with font-awesome line breaks

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

Upvotes: 13

Views: 26519

Answers (5)

Ankit Singh
Ankit Singh

Reputation: 347

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>

Upvotes: 0

Adriano
Adriano

Reputation: 20041

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.

font awesome's built-in solution for 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>

Upvotes: 26

Sleek Geek
Sleek Geek

Reputation: 4686

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

Upvotes: 3

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

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>

Upvotes: 2

pavel
pavel

Reputation: 27092

You are probably looking for st. like this.

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

Upvotes: 5

Related Questions