How to resize image from content attribute in CSS

Question

I have a ::before pseudo class that calls an image and adds text via the content attribute. However the icon is too large. How can I resize it?

I'm currently stuck with the following code where none of the px attributes has an effect:

.parentcategory3::before {
  content: url(https://unsplash.it/18) ' text that follows:';
  background-size: 100px !important;
  width: 100px !important;
  height: 100px !important;
  visibility: visible;
}

<div class="more_info parentcategory3">
  <span class="checkbox" style=""></span>
</div>

I have searched but always got to the same suggestions.

Does anyone have an idea how to solve this?

If it is not possible is there a way to add a font awesome icon (while keeping the text after the icon!)?

Many thanks in advance!!

Answer 1

Can you try the zoom property to make the image larger and smaller? For example:

.parentcategory3::before {
  content: url(https://picsum.photos/150) ' text that follows:';
  zoom:50%;
  background-size: 100px !important;
  width: 100px !important;
  height: 100px !important;
  visibility: visible;
  display: block;
}

Answer 2

If I read your question correctly, your best bet is probably to load the image as a background image, as @Temani originally suggested. Then adjust the background-size and padding-left values to fit your needs.

.first::before {
  content: 'text that follows 1';
  background: url(https://unsplash.it/18) left center no-repeat;
  vertical-align: middle;
  background-size: 16px auto;
  padding-left: 20px;
}

.second::before {
  content: 'text that follows 2';
  background: url(https://unsplash.it/18) left center no-repeat;
  vertical-align: middle;
  background-size: 12px auto;
  padding-left: 16px;
}

<div class="first"></div>

<div class="second"></div>