Font-Awesome Icon Hover Issue - html

Question

I have made a menu with Bootstrap and FontAwesome. I want to change the color of all the social media icons to their original colors. Below is the snippet:
HTML
<nav class="navbar navbar-fixed-top" style="border-top:2px solid #CC0033;border-bottom:2px solid #CC0033;">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--<div class="navbar-collapse collapse" id="navbar">-->
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a aria-expanded="true" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-facebook-square social-icon"></i></li>
<li><i class="fa fa-twitter-square social-icon"></i></li>
<li><i class="fa fa-instagram social-icon"></i></li>
<li><i class="fa fa-pinterest-square social-icon"></i></li>
<li><i class="fa fa-youtube-square social-icon"></i></li>
<li><i class="fa fa-google-plus-square social-icon"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
CSS
.navbar .navbar-nav > li
{
border: 0px !important;
}
.navbar .navbar-nav > li > a
{
color: #CC0033 !important;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
}
.navbar .navbar-nav > li > a:hover
{
color: #FFFFFF !important;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
background-color: #CC0033 !important;
}
.fa { font-family: 'FontAwesome' !important; }
.social-icon
{
color: #CC0033 !important;
font-size:25px !important;
}
.navbar .navbar-nav > li > a.twitter:hover
{
color: #00ACED !important;
}
Here is a non-working Demo
On hover the icon shall display like this:
For hover I have put the following CSS:
.navbar .navbar-nav > li > a.twitter:hover
{
color: #00ACED !important;
}
How can I achieve the same? Any help will be appreciated.

Answer 1

also try this
.navbar .navbar-right > li > a:hover{
color: #fff !important;
}
.navbar .navbar-right > li > a:hover .fa{
color: #fff !important;
}

Answer 2

Just remove the following code:
.navbar .navbar-nav > li > a:hover {
/* background-color: #CC0033 !important; */
}
The background-color is over shadowing the color of your font awesome icons, hence they are not visible on hover.
Instead if you want to change the color of your font awesome icons on hover use the following code:
.navbar .navbar-nav > li > a:hover > i {
color: #00abf1 !important;
}
EDIT
To change the background-color of the li to white, just remove the following code:
nav > li > a:hover {
/* background-color: #eee; */
}

Answer 3

You can achieve the desired effect by changing these two lines--
.navbar .navbar-nav > li > a:hover > i {
color: #00abf1 !important;
}
.navbar .navbar-nav > li > a:hover {
background-color: white !important;
}
In this way you can change the background-color of li to white.
.navbar .navbar-nav > li
{
border: 0px;
}
.navbar .navbar-nav > li > a
{
color: #CC0033;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
}
.navbar .navbar-nav > li > a:hover
{
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
background-color: #CC0033 !important;
}
.fa { font-family: 'FontAwesome' !important; }
.social-icon
{
color: #CC0033;
font-size:25px;
}
.navbar .navbar-nav > li > a:hover > i {
color: #00abf1 !important;
}
.navbar .navbar-nav > li > a:hover {
background-color: white !important;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<nav class="navbar navbar-fixed-top" style="border-top:2px solid #CC0033;border-bottom:2px solid #CC0033;">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--<div class="navbar-collapse collapse" id="navbar">-->
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a aria-expanded="true" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-facebook-square social-icon"></i></li>
<li><i class="fa fa-twitter-square social-icon"></i></li>
<li><i class="fa fa-instagram social-icon"></i></li>
<li><i class="fa fa-pinterest-square social-icon"></i></li>
<li><i class="fa fa-youtube-square social-icon"></i></li>
<li><i class="fa fa-google-plus-square social-icon"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</body>
</html>
Hope this helps!

Answer 4

If you replace this code:
.navbar .navbar-nav > li > a.twitter:hover
{
color: #00ACED !important;
}
With this:
.navbar .navbar-nav li a:hover > .fa-twitter-square { color: #00ACED !important; }
Than it should working, good luck!

Answer 5

Simply replace this
.navbar .navbar-nav > li > a:hover
{
color: #FFFFFF !important;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
background-color: #CC0033 !important;
color: #00aced
}
by this
.navbar .navbar-nav > li > a:hover
{
color: #FFFFFF !important;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
background-color: #CC0033;
color: #00aced
}
and add this
.navbar .navbar-right > li > a:hover{
background-color: #fff
}
.navbar .navbar-right > li > a.twitter:hover i{
color: #00aced !important;
}
All the best :)

Answer 6

Add this to your css code:
.social-icon:hover {
color: white!important;
}
Works for me that way...