0

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"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></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><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider" role="separator"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
         </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><i class="fa fa-facebook-square social-icon"></i></a></li>
          <li><a href="#" class="twitter"><i class="fa fa-twitter-square social-icon"></i></a></li>
          <li><a href="#"><i class="fa fa-instagram social-icon"></i></a></li>
          <li><a href="#"><i class="fa fa-pinterest-square social-icon"></i></a></li>
          <li><a href="#"><i class="fa fa-youtube-square social-icon"></i></a></li>
          <li><a href="#"><i class="fa fa-google-plus-square social-icon"></i></a></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:

Twitter

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.

5
  • Your Demo is working for me (except that your icon has same color as background on hover, so you don't see it)
    – Nimesco
    Mar 1, 2017 at 10:22
  • 1
    Can you try this: .navbar .navbar-nav li a:hover > .fa { color: #00ACED !important; } ? Mar 1, 2017 at 10:25
  • 1
    You should not need to use !important on everything :) bootply.com/1ywzSCHZ5Z Mar 1, 2017 at 10:30
  • @C0dekid: This works. You can add this as an answer. :) Mar 1, 2017 at 10:42
  • @SenjutiMahapatra added my answer :-) Mar 1, 2017 at 10:44

6 Answers 6

3

also try this

    .navbar .navbar-right > li > a:hover{
       color: #fff !important;
     }
    .navbar .navbar-right > li > a:hover .fa{
        color: #fff !important;
    }
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; */
}
1
  • With hover can I change the background-color of li to white? Mar 1, 2017 at 10:41
1

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"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></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><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider" role="separator"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
             </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
              <li><a href="#"><i class="fa fa-facebook-square social-icon"></i></a></li>
              <li><a href="#" class="twitter"><i class="fa fa-twitter-square social-icon"></i></a></li>
              <li><a href="#"><i class="fa fa-instagram social-icon"></i></a></li>
              <li><a href="#"><i class="fa fa-pinterest-square social-icon"></i></a></li>
              <li><a href="#"><i class="fa fa-youtube-square social-icon"></i></a></li>
              <li><a href="#"><i class="fa fa-google-plus-square social-icon"></i></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>

</body>
</html>

Hope this helps!

1
1

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!

5
  • .fa can be replaced with .fa-twitter-square to give different style to every social media icon :) Mar 1, 2017 at 10:45
  • With hover can I change the background-color of li to white? Mar 1, 2017 at 10:45
  • @SenjutiMahapatra if you try this: .navbar .navbar-nav.navbar-right li:hover a { background: #FFF !important; } the background will be white if hover, the icon will get the blue color :) Mar 1, 2017 at 10:49
  • This will not give the background-color white to whole li, but just to the a Mar 1, 2017 at 10:55
  • @SenjutiMahapatra the anchor tag is filling up the li so technically it does nothing if you want to change the background color of the li on hover. So you have to style the anchor tag. Mar 1, 2017 at 10:59
1

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 :)

0

Add this to your css code:

.social-icon:hover {
    color: white!important;
}

Works for me that way...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.