Telegram API Question posted in
A comprehensive official documentation can be found here.

How to remove underline from font awesome icon – Telegram API

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

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search