How to put CSS in more than one LI (list/html)

Question

good afternoon. I am participating in a course where our challenge is to make a simple "visit" card. Well, I almost finished, but I can’t put the logos next to the sites. First I made the UL list and took the balls out in CSS and then added links with target Blank for the person to click and direct. The question, how do I put the logos separately ? I tried to create a class in the <a></a> e até no <li></li> to put but the css didn’t work.

<div class="corpo">
        <h1>Mateus Malvezzi</h1>
        <img src="m².jpg" alt="foto mateus">
        <ul>
            <a href="https://www.instagram.com/"  target="_blank"><li>Instagram</li></a>
            <a href="https://www.linkedin.com/in/mateus-malvezzi-1a0913181/" target="_blank"><li>LinkedIn</li></a>
            <a href="https://github.com/MateusMalvezzi" target="_blank"><li>GitHub</li></a>
        </ul>
    </div>

The HTML is like this. And the "finished" card looks like this.

Answer 1

You can customize this way also in css by inserting the image for each li an image:

li{
   list-style: none;
}
ul li:nth-child(1)::before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px;
   background-image: url('suaimagem');
   background-size: contain;
}
ul li:nth-child(2)::before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px;
   background-image: url('suaimagem');
   background-size: contain;
}