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

问题描述

我在我的应用程序中使用了一个很棒的字体图标，但是由于某种原因它无法正确显示

这是我的代码：

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可以达到目的

解决方法

下划线的原因是a标签与Font-awesome无关，因此您必须从CSS的decoration标签中删除a。

例如：

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

或在您的CSS文件中：

a {
   text-decoration: none !important;
}

,

可能这就是您要寻找的：

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

将文本修饰设置为none将从<a>标记中删除下划线。