如何从Font Awesome图标中移除下划线

Question

我在我的React应用程序中使用Font Awesome图标，但由于某种原因它没有正确显示。

这是我的代码：

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;

}

我的Font Awesome图标在屏幕上看起来像这样：

当我将Font Awesome图标设置为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就解决了问题。

- yappy twan

Answer 1

下划线的原因是a标签与Font-awesome无关，所以您需要在CSS中从a标签中删除decoration。

例如：

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

或者在你的CSS文件中：

a {
   text-decoration: none !important;
}

- mohamedvall

---

@yappytwan 你能在编辑后附上你的代码吗？ 我已经更新了我的答案。 - mohamedvall

Answer 2

可能这就是你正在寻找的内容：

<a class="hr" href="https://t.me/memecoins">
      <i class="fab fa-telegram fa-2x" ></i>
</a>

风格：

.hr {
      text-decoration:none;
}

.fab{
  background-color:#263238;
}

将text-decoration设置为none将从<a>标签中删除下划线。

- Efthymios Kalyviotis

---

也许是你的 div 类样式出了些问题。你能把它们写在上面吗？（请提供尽可能多的信息）... 也许你应该先完全删除那个 class="top float-right" 部分，看看会发生什么。 - Efthymios Kalyviotis

好的，它起作用了，我删除了整个 div，下划线消失了 - 谢谢。 - yappy twan

不客气。只需记住，当您使用a标签时，需要使用text-decoration:none来去除下划线。从那时起，上面的答案就是正确的。 - Efthymios Kalyviotis