title: How to resize image from content attribute in CSS
body: <p>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?</p>
  
  <p>I'm currently stuck with the following code where none of the px attributes has an effect:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parentcategory3::before {
    content: url(https://unsplash.it/18) ' text that follows:';
    background-size: 100px !important;
    width: 100px !important;
    height: 100px !important;
    visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="more_info parentcategory3"&gt;
    &lt;span class="checkbox" style=""&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have searched but always got to the same suggestions. </p>
  
  <p>Does anyone have an idea how to solve this?</p>
  
  <p>If it is not possible is there a way to add a font awesome icon (while keeping the text after the icon!)?</p>
  
  <p>Many thanks in advance!!</p>