Button hover effect not affecting icon inside button

September 6, 2023

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>

>Solution :

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>