Django项目模板中FontAwesome图标hover时出现线条的问题求助

嘿，这个问题我碰到过！你看到的蓝色箭头标注的线条，其实是Bootstrap默认给<a>标签设置的hover状态下划线——虽然你给a加了outline: medium none;，但这个属性是用来去掉聚焦时的外边框，和文本下划线完全没关系哦。

问题根源 #

Bootstrap的全局样式里，<a>标签在hover或focus时默认会启用text-decoration: underline样式，而你的FontAwesome图标是嵌套在<a>标签里的，所以鼠标悬停时就会触发这个下划线效果。

解决方案 #

我们只需要针对性地去掉图标所在<a>标签的hover下划线即可，这里有两种简单的实现方法：

方法1：给图标链接添加专属类（推荐，避免影响其他链接）

先修改你的HTML，给每个包含图标的<a>标签加上一个专属类，比如nav-icon-link：

<nav class="navbar navbar-light"> 
  <a class="navbar-brand" href="#"> Grouper </a> 
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" > 
  <nav> 
    <a href="#" class="nav-icon-link"> <i class="fas fa-home"></i> </a> 
    <a href="#" class="nav-icon-link"> <i class="fas fa-plus-circle"></i> </a> 
    <a href="#" class="nav-icon-link"> <i class="fas fa-user-circle"></i> </a> 
    <a href="#" class="nav-icon-link"> <i class="fas fa-cog"></i> </a> 
  </nav> 
</nav>

然后在styles.css里添加以下样式：

/* 去掉图标链接的默认下划线 */
.nav-icon-link {
  text-decoration: none;
}
/* 确保hover和聚焦状态下也没有下划线 */
.nav-icon-link:hover,
.nav-icon-link:focus {
  text-decoration: none;
}

方法2：直接针对导航内的图标链接（无需修改HTML）

如果不想添加新类，可以直接通过CSS选择器定位到导航里的图标链接，在styles.css里添加：

.navbar > nav > a {
  text-decoration: none;
}
.navbar > nav > a:hover,
.navbar > nav > a:focus {
  text-decoration: none;
}

额外优化提示 #

你给.fas设置了border和padding，可以顺便给图标链接加上display: inline-block，避免hover时点击区域和图标边框错位：

.nav-icon-link {
  text-decoration: none;
  display: inline-block; /* 让点击区域和图标边框对齐 */
}

这样修改后，鼠标悬停在图标上时就不会再出现那条烦人的下划线啦！

内容的提问来源于stack exchange，提问作者Poornaka