Font-Awesome Icon Hover Issue

时间：2017-03-01 10:19:49

标签： html css twitter-bootstrap twitter-bootstrap-3 font-awesome

我制作了一个包含Bootstrap和FontAwesome的菜单。我想将所有社交媒体图标的颜色更改为原始颜色。以下是摘录：

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;
}

这是一个不起作用的Demo

悬停时，图标应显示如下：

Twitter

悬停时我放了以下CSS：

.navbar .navbar-nav > li > a.twitter:hover
{
    color: #00ACED !important;
}

我怎样才能达到同样的目标？任何帮助将不胜感激。

6 个答案:

答案 0 :(得分：3)

也试试这个

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

答案 1 :(得分：2)

只需删除以下代码：

.navbar .navbar-nav > li > a:hover {
    /* background-color: #CC0033 !important; */
}

background-color遮盖了字体真棒图标的颜色，因此在悬停时不会显示它们。

相反，如果您想在悬停时更改字体的颜色，请使用以下代码：

.navbar .navbar-nav > li > a:hover > i {
    color: #00abf1 !important;
}

修改

要将background-color的{​​{1}}更改为白色，只需删除以下代码：

li

答案 2 :(得分：1)

如果您替换此代码：

.navbar .navbar-nav > li > a.twitter:hover
{
    color: #00ACED !important;
}

有了这个：

.navbar .navbar-nav li a:hover > .fa-twitter-square { color: #00ACED !important; }

它应该工作，祝你好运！

答案 3 :(得分：1)

只需更换此

即可 
.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
}

由此

.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
}

并添加此

.navbar .navbar-right > li > a:hover{
    background-color: #fff 
 }
.navbar .navbar-right > li > a.twitter:hover i{
    color: #00aced !important;
}

一切顺利：）

答案 4 :(得分：1)

您可以通过更改这两行来实现所需的效果 - 

.navbar .navbar-nav > li > a:hover > i {
color: #00abf1 !important;
 }
.navbar .navbar-nav > li > a:hover {
background-color: white !important;
}

通过这种方式，您可以将li的背景颜色更改为白色。

.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>

希望这有帮助！

答案 5 :(得分：0)

将此添加到您的css代码中：

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

以这种方式为我工作......

相关问题
最新问题