CODEWITHSUNDEEP
twitter-bootstrapcolorsbackgroundicons
Ivanko
Ivanko

Reputation: 65

How to remove Bootstrap background color from fa icons

I am working on a website. In my navigation bar I have 3 fa bootstrap icons: Facebook, Twitter and LinkedIn. Every time I hover over them I see lightgray background color. I have tried to remove that background but without success. I have to mention that the background is not background of the icons but just guessing it is something else. Here is the code. Sorry for the long code. Thanks.

HTML

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/fastyle.css">
    <title> Fa Problem</title>
    </head>
    <body>
    <div class="container-fluid">
    <nav class="navbar secondnav" data-spy="affix" data-offset-top="150">
    <div class="container-fluid">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsebar" aria-expanded="false">
            <span class="sr-only">MENU</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>

        <div class="collapse navbar-collapse" id="collapsebar">
        <ul class="nav navbar-nav pos">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">SUB DROP<b class="caret">
                  </b></a>

          <ul class="dropdown-menu">
            <li><a href="#">Sub1</a></li>
            <li><a href="#">Sub2</a></li>
            <li><a href="#">Sub3</a></li>
            <li><a href="#">Sub4</a></li>

          </ul>
            </li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
        <form class="navbar-form navbar-search pull-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-warning">GO</button>
    </form>
      <ul class="nav navbar-nav pull-right social">
                    <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
                </ul>
    </div>
    </div>
          </nav>
        </div>
        </body>
        </html>


**CSS**

.pos>li>a{
        font-size:16px;
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight:bold !important;
        transition: all 0.4s ease-in-out;
    }
    .pos>li>a:hover{
    color: #555 !important;
    background-color: transparent !important;
    }

     .pos>li>a::after{
      content: '';
      position: absolute;
      background: linear-gradient(45deg, black,red);
      height: 0.15em;
      top: 80%;
      left: 0px;
      width: 0%;
      transition: width 0.3s ease-in-out;
     }
     .pos>li>a:hover::after{
        width: 100%;
    }

    .dropdown-menu{
        border-radius: 0px;
        border-top: 5px solid transparent;
        background-color: black !important;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-top: 0;
    }


    .dropdown-menu>li>a{
        -webkit-font-smoothing: antialiased;
       font-weight:bold;
        color:white;
        border:none !important;
    }

    .pos .dropdown-menu>li>a:hover{
        background-color:lightgray !important;
        border:transparent !important;

    }


    .fa{
    color:black;
    transition-timing-function: ease-in-out;
    transition: all .4s ease-in-out;
    }
    .fa:hover{
        background-color: transparent;
        color:orange;
        transform: scale(2,2);

    }
    .nav>li>a>.fa:focus, .fa:active{
        background-color: transparent !important;
    }

    .social{
        margin-right:30px;
        padding:0px;
    }

https://codepen.io/ivanko79/pen/VWMPZN

Upvotes: 0

Views: 4501

Answers (1)

Sethumadhavan K
Sethumadhavan K

Reputation: 83

Add id to the span element Example :

<span id='a'></span>

In css add this :

#a:hover {
     background-color: transparent;
    }

You also class name for css selector .fa and remove id from span

Upvotes: 3

Related Questions