html - Best way to attach icon left to a text -


i'm bad css, using bootstrap & set icon before

  • , i'd create "blog" talking bets , have add type of sport chose use icons in list

    screenshot here

    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

    Popular posts from this blog

    ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

    java - Digest auth with Spring Security using javaconfig -

    laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -