Q:

 element in nav-link - can't turn off hover highlight

I've got a seemingly small issue I can't seem to correct no matter what I'm trying. This is a navbar problem with an  element displaying a font awesome icon, and shows a red text and yellow background when I hover over this icon. The  is outside the Dashboard but the Dashboard text doesn't highlight like the icon does. It abides by the navbar wishes. But the .fas or whatever is causing the highlights I'm trying to get rid of. Help me Overflow Kenobis. You're my only hope.
<li class="nav-item" style="">
  <a class="nav-link btn " method="POST" href="/users/dashboard" style="">
    <i class="fas fa-tachometer-alt "></i> Dashboard
  </a>
</li>

A:

You can use :hover on <a> tag instead of <i> and remove the :hover from icon...
...If you can't find the :hover of icon you can apply pointer-events:none to the icon.
Stack Snippet

.nav-item a:hover {
  background: yellow;
  color: red;
}

.nav-item a i:hover {
  background: red;
  color: black;
}

.nav-item a i {
  pointer-events: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<ul class="nav">
  <li class="nav-item" style="">
    <a class="nav-link btn " method="POST" href="/users/dashboard" style="">
      <i class="fa fa-tachometer"></i> Dashboard
    </a>
  </li>
</ul>

