'image infront of span

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 class="label">
  () BASIC
</span>
<span class="label">
  ()()PREMIUM
</span>
<span class="label">
  ()()()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!

htmlcss


Solution 1:[1]

The existing answers assume the height of the text and set the image width to match that, meaning that the image would not stay the same relative size as the text when you increase or decrease size the font size.

If you use a relative font size, such as 1em, for the height of the image, and not set its width, you will have the image with the correct width/height proportions and that will adjust to the size of the text.

#large {
  font-size: 36px
}

#medium {
  font-size: 24px
}

#small {
  font-size: 12px
}

.label {
  background-color: black;
  color: white;
  padding: .8em;
  display: inline-block;
}

.label:before {
  content: ""
}

.label img {
  display: inline-block;
  margin-right: .3em;
  vertical-align: middle;
  height: 1em;
}
<div id="large">
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
  <span class="label">
  <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>
</div>

<div id="medium">
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
  <span class="label">
  <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>
</div>

<div id="small">
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
  <span class="label">
  <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>
</div>

Solution 2:[2]

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 class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
<span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/>
  <img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
<span class="label">
  <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;
}

Solution 3:[3]

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

HTML

 <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
<span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
<span class="label">
  <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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 nicedev666
Solution 3 marcos.efrem

Related Questions