Reputation: 11108
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.
Upvotes: 13
Views: 26519
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
Reputation: 20041
You can try to use font awesome's built-in solution for lists:
Use
fa-ul
andfa-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>
Upvotes: 26
Reputation: 4686
Why not do these:
Apply position
with a property value
of relative
to li
to avoid overlap
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;
}
Upvotes: 3
Reputation: 2157
i think you are expecting like this
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>…and many more with custom CSS</li>
</ul>
Upvotes: 2
Reputation: 27092
You are probably looking for st. like this.
em {float: left;}
a, span {margin: 0 0 0 20px; display: block;}
Upvotes: 5