'Ionic icons hover effect

I am using ion-icons as part of a website I am building. How do I select an individual icon in css? Everytime I try to add a class or an id to the link it disappears on my webiste.

I would like to take 3 different social media icons and change the color when the mouse hovers over them. IE, when you hover over the FaceBook Icon it changes the color to the facebook blue.

Here is one of the examples I am using:

 <ul class="social-links">
     <li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
     <li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
 </ul>

Thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source