CODEWITHSUNDEEP
htmlcssicons
whitelamp
whitelamp

Reputation: 37

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

    Upvotes: 1

    Views: 2016

    • Answers (2)

    Madan Bhandari
    Madan Bhandari

    Reputation: 2184

    Here is an another way :

    ul {
  list-style: none
}
li {
  position: relative;
  background: url(//dummyimage.com/10x10) no-repeat center left;
  padding-left : 20px;
}
    <ul>
  <li>John Doe</li>
  <li>Peter Rabbit</li>
</ul>

    Upvotes: 0

    cssyphus
    cssyphus

    Reputation: 40038

    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/

    Upvotes: 4

    Related Questions