Question 244042 in Html Question posted in
Some basic documentation can be found here.

Html – Button hover effect not affecting icon inside button

I’m trying to show underline effect on button with font-awesome but I want to affect both text and icon but it affects only text inside button ignoring icon completely (as in example). Is there any way to stretch this underline to icon also?

button {
  color: #333;
  background: #eee;
  border: none;
  padding: 2px 10px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
}

button:hover {
  text-decoration: underline;
  color: black;
}
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <div class="comment-actions" style="display:flex; flex-direction: row; justify-content: start;">

    <button><i class="fa fa-reply"></i> Reply</button>
    <button><i class="fa fa-flag"></i> Report</button>
    <button><i class="fa fa-thumb-tack"></i> Save</button>

  </div>
</body>
Tags:

3

Answers


  1. 0

    Font awesome <i> elements are displayed as inline-block by default, which won’t be affected by underlines. However if you overwrite the default style and show them as inline elements, they will be treated like the text:

    button {
  color: #333;
  background: #eee;
  border: none;
  padding: 2px 10px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
}

button .fa {
  display: inline;
}

button:hover {
  text-decoration: underline;
  color: black;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="comment-actions" style="display:flex; flex-direction: row; justify-content: start;">
    <button><i class="fa fa-reply"></i> Reply</button>
    <button><i class="fa fa-flag"></i> Report</button>
    <button><i class="fa fa-thumb-tack"></i> Save</button>
  </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    It seems that text-decoration doesn’t automatically extend to pseudo-elements, which is what the icons are. You can adjust your CSS to cover that.

    button {
  color: #333;
  background: #eee;
  border: none;
  padding: 2px 10px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
}

button:hover, button:hover :before {
  text-decoration: underline;
  color: black;
}
    <head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <div class="comment-actions" style="display:flex; flex-direction: row; justify-content: start;">

    <button><i class="fa fa-reply"></i> Reply</button>
    <button><i class="fa fa-flag"></i> Report</button>
    <button><i class="fa fa-thumb-tack"></i> Save</button>

  </div>
</body>
    Login or Signup to reply.
  3. 0

    Keep your HTML exactly the same and do this:

     button:hover, button:hover i {
             text-decoration: underline;
             color: black;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search