css - 如何从 Font Awesome 图标中删除下划线

Question

我在我的 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;

}

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

当我在 3x 和更大的字体上有超棒的图标时，我看不到这个下划线，它不再存在它只显示小图标大小

我将代码固定为:

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 无关，因此您必须从 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;
}