html - Wrap text with list item and icon -
is possible keep tick icon left , text stay in 1 block.
right now, text goes under tick icon doesn't great.
li { list-style-type: none }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <ul> <li><i aria-hidden="true" class="fa fa-check" style="padding-right:0.5em;"></i>lorem ipsum dolor sit amet, consectetur adipiscing elit. sed tincidunt lacus @ eros elementum, sit amet scelerisque tortor rhoncus. donec imperdiet magna purus, ut congue est sollicitudin vel. maecenas eget blandit magna. nulla vel faucibus neque. nam sed mauris @ eros consequat tincidunt.</li> </ul>
just add display:flex
li
below.
li { list-style-type: none; display:flex; }
li {list-style-type:none; display:flex;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <ul> <li><i aria-hidden="true" class="fa fa-check" style="padding-right:0.5em;"></i>lorem ipsum dolor sit amet, consectetur adipiscing elit. sed tincidunt lacus @ eros elementum, sit amet scelerisque tortor rhoncus. donec imperdiet magna purus, ut congue est sollicitudin vel. maecenas eget blandit magna. nulla vel faucibus neque. nam sed mauris @ eros consequat tincidunt.</li> <li><i aria-hidden="true" class="fa fa-check" style="padding-right:0.5em;"></i>lorem ipsum dolor sit amet, consectetur adipiscing elit. sed tincidunt lacus @ eros elementum, sit amet scelerisque tortor rhoncus. donec imperdiet magna purus, ut congue est sollicitudin vel. maecenas eget blandit magna. nulla vel faucibus neque. nam sed mauris @ eros consequat tincidunt.</li> </ul>
Comments
Post a Comment