React中Font Awesome图标下划线移除及显示异常问题解决

Hey，我刚好碰到过一模一样的问题！在React项目里用Font Awesome图标时，小尺寸图标（比如fa-2x）会莫名出现下划线，但换成fa-3x及更大尺寸就完全正常，折腾了一会儿终于找到原因和解决办法了。

问题回顾 #

你最开始的代码是这样的：

初始React组件代码

const Header = () => { 
  return ( 
    <div> 
      <div class="top float-right" > 
        <a href="https://t.me/memecoins"> 
          <i class="fab fa-telegram fa-2x" ></i>
        </a> 
      </div> 
      <a href="../"><img className="logo float-left " src={logo} alt="Logo"/></a> 
    </div> 
  )
};

配套CSS代码

.fab{ background-color:#263238; }

为什么会出现下划线？ #

这个下划线其实是<a>标签的默认text-decoration: underline样式搞的鬼！外层嵌套的<div class="top float-right">让浏览器把小尺寸的图标当成了行内文本内容，所以触发了链接的下划线；而大尺寸图标因为占位足够大，浏览器渲染时没把它判定为需要加下划线的文本，所以就没出现这个问题。

解决办法：移除多余的嵌套div #

把包裹<a>标签的外层<div>删掉，直接把float-right类加到<i>标签上，同时记得给跳转链接加上rel="noopener noreferrer"和target="_blank"（这是跳转外部链接的安全最佳实践）。修改后的完整代码如下：

const Header = () => { 
  return ( 
    <div> 
      <a href="https://t.me/memecoins" rel="noopener noreferrer" target="_blank"> 
        <i class="fab fa-telegram fa-3x float-right" ></i>
      </a> 
      <a href="../"><img className="logo float-left " src={logo} alt="Logo"/></a> 
      <h1 className="text-center text-warning mt-3 mb-4">MEMECO.IN</h1> 
      <h5 className="text-center text-success mb-4"> 
        <a href="https://boards.4channel.org/biz/catalog" target="_blank" rel="noopener noreferrer" >/biz/ </a> 
        Coin Tracker
      </h5> 
    </div> 
  ); 
};

通用兜底方案：CSS强制移除下划线 #

如果以后再碰到类似的图标下划线问题，也可以直接用CSS一刀切，强制去掉图标所在链接的下划线：

a .fab {
  text-decoration: none !important;
}

这样不管图标尺寸多大，都不会出现下划线啦。

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