whitelamp whitelamp - 6 months ago 9
HTML Question

Best way to attach icon left to a text

I'm bad with CSS, using bootstrap & now I would like to set an icon just before a

  • , I'd like to create a "blog" talking about bets and so I have to add the type of sport so I chose to use icons in the list

    screenshot here

    So I tried to do this simply with but as you can see it's not good, the list is supposed to make 1 line, not 2, also the icon should be at the left

    I tried to deal with ":before" but didn't succeed, also I'd like a good way to do it, for me to change dynamically the icon with PHP (by updating the list)

    What is the best way to make it ? Thanks

  • Answer

    Flexbox is the way to align things these days. This might help get you 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