Twitter Bootstrap Question posted in

Twitter bootstrap – font awesome hover color margin turns black

I’m a beginner trying out some things on rails as I work through Michael Hartl’s tutorial. I am trying to have my social media buttons change color upon hover, but I see the change of color in two stages: when the pointer is within the ‘radius’ of the font awesome button, it turns black; then when the pointer is right over the button itself it shows the color I intend. How could I make the button change color without first turning black?

After some searches, I’ve only found posts pertaining to changing the font awesome color upon hover, but I haven’t found anything pertaining to this black-radius hover color change. All help is well received.

Thanks!

My footer html, where I placed the buttons:

<footer class="footer">
  <nav>
    <ul>
      <li><a href="https://twitter.com/twitteraccount" class="btn btn-social-icon btn-twitter" target="_blank"><i class="fa fa-twitter fa-2x"></i></a></li>
      <li><a href="https://www.facebook.com/facebookaccount" class="btn btn-social-icon btn-facebook" target="_blank"><i class="fa fa-facebook fa-2x"></i></a></li>
    </ul>
  </nav>
</footer>

The CSS:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";


/* universal */

body {
  padding-top: 60px;
  background-color: #4B088A;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.center h1 {
  margin-bottom: 10px;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #9400D3;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

/* footer */

footer {
  margin-top: 45px;
  padding: 15px;
  border-top: 1px solid #eaeaea;
  color: #fff;
}

footer a {
  color: #fff;
}

footer a:hover {
  color: #222;
}

footer small {
  text-align: center;
}

footer ul {
  float: right;
  list-style: none;
  font-size: 1.2em
}

footer ul li {
  float: left;
  margin-left: 15px;
}

.gap-right {
  margin-right: 10px; 
}

.fa:hover {
    color: #BCA9F5;
}
Tags:

2

Answers


  1. 0

    this CSS code is the problem, the link changes color once you hover it, then when you reach the fontawesome icon, the next rule is enforced.

    footer a:hover {
    color: #222;
    }

    Login or Signup to reply.
  2. 0

    You’re running into this issue because the :hover property is being defined first on .footer a, then on the .fa class, which will only happen when you hover on the icon. Also, bootstrap’s .btn class will apply its hover style to the link, which is why you’re getting that two-stage hover behavior, so you need to override that as well.

    Remove: 

    .fa:hover {
    color: #BCA9F5;
}

    Change: 

    footer a:hover {
  color: #BCA9F5;
}

footer .btn:hover {
   color: #fff;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search