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.

demo

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

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -