我正在使用离子图标作为我正在构建的网站的一部分。如何在css中选择单个图标？每次我试图在链接中添加一个类或id时，它都会在我的网站上消失。
我想拿三个不同的社交媒体图标，当鼠标悬停在它们上面时改变颜色。IE，当你将鼠标悬停在FaceBook图标上时，它会将颜色更改为FaceBook蓝色。
下面是我使用的一个例子：
<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>
提前谢谢。
根据问题中给出的代码加上随后评论中添加的代码，我进行了一个小测试，它似乎运行良好。
这意味着一定有"更上层"的东西干扰了图标的设置。可能在CSS社交链接类中？
这是工作片段。注意，图标在悬停时变成红色只是为了使它们与标准颜色不同。
<head>
<!--<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>-->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
<style>
.instaLogo:hover { color: #1877f2; color:red;} /*change to red just to show that the color is actually changing */
</style>
</head>
<body>
<ul class="social-links">
<li><a href="#" class="instaLogo"><ion-icon name="logo-instagram"></ion-icon></a></li>
<li><a href="#" class="instaLogo"><ion-icon name="logo-facebook"></ion-icon></a></li>
</ul>
</body>