Twitter Bootstrap Question posted in

Font-Awesome Icon Hover Issue – Twitter bootstrap

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.

Tags:

6

Answers


  1. 0

    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; */
}
    Login or Signup to reply.
  2. 0

    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!

    Login or Signup to reply.
  3. 0

    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 🙂

    Login or Signup to reply.
  4. 0

    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!

    Login or Signup to reply.
  5. 0

    also try this

        .navbar .navbar-right > li > a:hover{
       color: #fff !important;
     }
    .navbar .navbar-right > li > a:hover .fa{
        color: #fff !important;
    }
    Login or Signup to reply.
  6. 0

    Add this to your css code:

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

    Works for me that way…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search