How to remove underline from font awesome icon

user_12648331 0
Viewed 1788

Im using a font awesome icon in my react app but for some reason it isnt displayed correctly

Here is my code:

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>

and thats css

.fab{
  background-color:#263238;

}

and my font awesome icon looks on my screen like this: enter image description here

When i have the font-awesome icon on 3x and larger i dont see this underline, its not there anymore it only shows at small icon size

I fixed the code to this:

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

removing the div did the trick

twitter-bootstrap reactjs css
2 Answers

The reason of underline is a tag not related to Font-awesome, so you have to remove decoration from a tag in CSS.

For example:

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

Or in your CSS file:

a {
   text-decoration: none !important;
}
user_92379510

Probably this is what you are looking for:

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

Style:

.hr {
      text-decoration:none;
}

.fab{
  background-color:#263238;
}

Setting the text-decoration to none will remove the underline from the <a> tag.

user_60079840
Related