Place icon in list using CSS

Question

I made this script in jQuery to put a different icon depending on the extension that ends the href, but wanted to know how I can put the icon using CSS instead of tag <img>, 'Cause it looks like you’re half-witted.

        <script src="jquery-3.2.1.min.js"></script>
    <script>
        $( function(e) {
           $("li a[href $= '.zip']").before("<img src='imagens/icon_zip.gif'>");
           $("li a[href $= '.pdf']").before("<img src='imagens/icon_pdf.gif'>");
        });
    </script>

Answer 1

By CSS there would be no way to insert an element <img> on the page, but you can use the property background-image to insert the icon as background image in the link.

Just know the dimensions of the icon and adjust one padding-left with the width of the icon plus a small space up to the text.

For example, assuming your icon is 24x24 pixels, the padding-left could be 24+5 = 29px (5px spacing pixels). Could do this way:

ul{
   list-style: none;
   padding: 0;
}

li a{
   display: inline-block;
   height: 24px;
   line-height: 24px;
   padding-left: 29px;
   margin: 10px;
   background-repeat: no-repeat;
}

li a[href $= '.zip']{
   background-image: url(http://www.iades.com.br/inscricao/Images/icon.zip.gif);
}

li a[href $= '.pdf']{
   background-image: url(https://brava.com.gr/wp-content/uploads/2017/10/pdf-24x24.png);
}

<ul>
   <li>
      <a href=".zip">link 1</a>
   </li>
   <li>
      <a href=".pdf">link 2</a>
   </li>
</ul>