image infront of span-CodePudding

I have 3 labels (for a pricing table) and would like an image/icon in front of each text. i'm thinking, to use :before pseudo element (or not) but the important thing is that the image stays within the spans height, and keeps its proportions. the height of the span is unknown, as it gets its value from parent element further up, which will be different depending on screen size.

there is 3 labels, i would like to replace the () with the image, on each label. "basic" label with one image, "premium" with two images, and finally "ultimate" with 3 images.

<span >
  () BASIC
</span>
<span >
  ()()PREMIUM
</span>
<span >
  ()()()ULTIMATE
</span>

<br/><Br/>
<img src="https://i.imgur.com/LS2fyR9.png"/>

.label{
  background-color:black;
  color:white;
  padding:10px;
  display:inline-block;
}
.label:before{
  content:""
}

https://jsfiddle.net/q3kngfs9/

any help with be much appreciated!

CodePudding user response：

I think something like this. You can use pseudo-classes, which may be more semantically pleasing. But placing the img inline will do. Ideally, you give a width & height in the img tag

<span >
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
<span >
  <img src="https://i.imgur.com/LS2fyR9.png"/>
  <img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
<span >
  <img src="https://i.imgur.com/LS2fyR9.png"/>
  <img src="https://i.imgur.com/LS2fyR9.png"/>
  <img src="https://i.imgur.com/LS2fyR9.png"/>ULTIMATE
</span>

.label{
  background-color:black;
  color:white;
  padding:10px;
  display:inline-block;
}
.label:before{
  content:""
}

img {
  width: 2rem;
}

CodePudding user response：

Do you mean that? I have put each image inside the span without height only max-width

HTML

 <span >
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
<span >
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
<span >
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>ULTIMATE
</span>

CSS

.label{
  background-color:black;
  color:white;
  padding:10px;
  display:inline-block;
}
.label:before{
  content:""
}
.label img {
  display:inline-block;
  max-width:50px;
  margin-right:5px;
  vertical-align:middle;  
}

https://jsfiddle.net/MAXXALANDER/geqn2vLc/3/