html - Best way to attach icon left to a text -
i'm bad css, using bootstrap & set icon before
so tried can see it's not good, list supposed make 1 line, not 2, icon should @ left
i tried deal ":before" didn't succeed, i'd way it, me change dynamically icon php (by updating list)
what best way make ?
flexbox way align things these days. might started:
ul {list-style:none;} li {display:flex;align-items: center;} img {margin-right:10px;}
<ul> <li><img src="http://placekitten.com/49/51" /> john doe</li> <li><img src="http://placekitten.com/50/50" /> peter rabbit</li> </ul>
references:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Comments
Post a Comment