如何从字体真棒图标中删除下划线

Question

我在我的反应应用程序中使用了很棒的字体图标，但由于某种原因它没有正确显示

这是我的代码：

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;

}

我的字体很棒图标在屏幕上看起来像这样：

当我将字体很棒的图标放大到 3 倍或更大时，我看不到此下划线，它不再存在，仅以小图标尺寸显示

我将代码修复为：

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>
  );
};

删除 div 就成功了

Answer 1

下划线的原因是a标签与Font-awesome无关，所以你必须decoration从aCSS中的标签中删除。

例如：

<a href="https://t.me/memecoins" style={{textDecoration: 'none'}}> 
      <i class="fab fa-telegram fa-2x" ></i></a>

或者在你的 CSS 文件中：

a {
   text-decoration: none !important;
}