Question 337124 in CSS Question posted in
Some basic documentation can be found here.

Hiding Text after icon using CSS

How can I hide the text after the font awesome icon using CSS without having to put it in a span.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

<li class="nav-item">
  <a class="nav-link" href="opt-categories.php">
    <i class="fa fa-truck"></i>
    Food Categories
  </a>
</li>
Tags:

2

Answers


  1. 0

    Set the font size for entire link text to 0:

    .nav-link { font-size: 0; }

    then revert that property, for the icon only:

    .nav-link .fa { font-size: initial; }

    Other option would be to make text just invisible e.g. color: transparent; for the link and color: black; for the icon only.

    Login or Signup to reply.
  2. 0

    visibility: hidden seems to work well

    .nav-link {
  visibility: hidden;
}
.nav-link i {
  visibility: visible;
}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

<li class="nav-item">
  <a class="nav-link" href="opt-categories.php">
    <i class="fa fa-truck"></i>
    Food Categories
  </a>
</li>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search