toggle on 2 icons

by Neo1999

HTML

<head>
  <script src="https://kit.fontawesome.com/55740603f2.js" crossorigin="anonymous"></script>
</head>
<body>
     <section class="container2">
            <img src="" alt="">
            <h1>Tutorials</h1>
            
            <h4>I'm putting a link to the video when available</h4>
           
        <ul >
           <li>
     <span class="icons">
                <i class="ic1 far fa-check-circle"></i>
                <i class="ic2 fas fa-volume-up"></i>
            </span>
            <span>
              <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</a>
            </span>
            </li>
           <li>
                <span class="icons">
                    <i class="ic1 far fa-check-circle"></i>
                    <i class="ic2 fas fa-volume-up"></i>
                </span>
                <a href="">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            </a></li>
        </ul>
            
        </section>
</body>

CSS

.container2{
  
   
    padding: 50px;
    height: 120vh;
    vertical-align: middle;
}
.ic1,.ic2{ 
    position:absolute;
    cursor:pointer;
    line-height: 3em; 
}

li .fa-volume-up{
  opacity:1;
  -webkit-transition: opacity 200ms, -webkit-transform 200ms;
  z-index:99;
} 
li .fa-check-circle{
  opacity:0;
  z-index:100;
  
}
li .fa-volume-up:hover{
  opacity:0;
  z-index:0;
}

li .fa-check-circle:hover{
  opacity:1;
   -webkit-transition: opacity 200ms, -webkit-transform 200ms;
  z-index:99;
}

.container2 a{
    text-decoration: none;
    margin: 20px;
}
.container2 li{
    list-style-type: none;

}