Issue
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.
Solution
Taking the code given in the question plus that added in subsequent comments I have put together a small test and it seems to be working fine.
This means there must be something 'further up' that is disturbing the icon set-up. Could is be in the CSS social-links class?
Here is the working snippet. Note, the icons turn red on hover just to make them different from the standard color.
<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>Answered By - A Haworth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.